Easy Media Calc

반응형 스타일링에서 calc를 반복적으로 사용하게 되면 가독성이 떨어집니다.
이 라이브러리는 코드의 양을 줄이고 가독성을 높이기 위하여 만들었습니다.
저는 주로 React styled-components에서 사용합니다.

사용하시면 깃허브에 ⭐ 한 번만 눌러주시면 감사하겠습니다!!
오류가 있거나 문의할게 있으면 Issues 혹은 이메일로 연락 부탁드립니다.

사용 예시

---

// 라이브러리 사용 전
@media (max-width: 1024px) {
    width: calc(100vw * (300/428));
    margin: calc(100vw * (10/428)) calc(100vw * (15/428)) calc(100vw * (20/428)) calc(100vw * (30/428));
    font-size: calc(100vw * (15, 428));
    display:flex;
}

// 라이브러리 사용 후
import { FontSize, Margin, Media, Px, Width } from '@hellojh/easy-media-calc';
const mediaPxMb = 1024;
const mbSize = 428;
.
.
.
${Media(mediaPxMb,[
    Width(400, mbSize),
    Margin(10, 15, 20, 30, mbSize),
    FontSize(15, mbSize),
    "display:flex",
])}

단어는 ";"가 아닌 ","로 처리해야 합니다.
위 코드와 같이 일반 css는 문자열처럼 넣어야 합니다.

최상단에 분기 사이즈를 변수로 지정해두면 나중에 수정을 할 때 용이합니다.

종류

---

라이브러리 사용	출력 코드
Media(1024,[])	@media(max-width: 1024px){}
Px(100, 428)	calc(100vw * (100/428))
Width(100, 428)	width:calc(100vw * (100/428));
Height(100, 428)	height:calc(100vw * (100/428));
Top(100, 428)	top:calc(100vw * (100/428));
Bottom(100, 428)	bottom:calc(100vw * (100/428));
Left(100, 428)	left:calc(100vw * (100/428));
Right(100, 428)	right:calc(100vw * (100/428));
FontSize(100, 428)	font-size:calc(100vw * (100/428));
MT(100, 428)	margin-top:calc(100vw * (100/428));
MB(100, 428)	margin-bottom:calc(100vw * (100/428));
ML(100, 428)	margin-left:calc(100vw * (100/428));
MR(100, 428)	margin-right:calc(100vw * (100/428));
PT(100, 428)	padding-top:calc(100vw * (100/428));
PB(100, 428)	padding-bottom:calc(100vw * (100/428));
PL(100, 428)	padding-left:calc(100vw * (100/428));
PR(100, 428)	padding-right:calc(100vw * (100/428));
LineH(100, 428)	line-height:calc(100vw * (100/428));
BgColor(100, 428)	background-size:calc(100vw*(100/428));
BgColor(100, 50, 428)	background-size:calc(100vw*(100/428)) calc(100vw*(50/428));

Margin, Padding

마진과 패딩 같은 경우 축약형을 많이 사용합니다.
확장성을 좋게 하기 위하여 하나의 함수안에서 분기 처리를 하였습니다.

코드는 아래를 참고하시면 됩니다.
margin에서 auto를 사용할 경우 문자열로 auto를 넣으시면 됩니다.

라이브러리 사용	출력 코드
Margin(100, 50, 100, 50, 428)	margin:calc(100vw * (100/428)) calc(100vw * (50/428)) calc(100vw * (100/428)) calc(100vw * (50/428))
Margin(100, 50, 100, 428)	margin:calc(100vw * (100/428)) calc(100vw * (50/428)) calc(100vw * (100/428))
Margin(100, "auto", 100, 428)	margin:calc(100vw * (100/428)) "auto" calc(100vw * (100/428))
Margin(100, 50, 428)	margin:calc(100vw * (100/428)) calc(100vw * (50/428))
Margin(100, "auto", 428)	margin:calc(100vw * (100/428)) "auto"
Padding(100, 50, 100, 50, 428)	padding:calc(100vw * (100/428)) calc(100vw * (50/428)) calc(100vw * (100/428)) calc(100vw * (50/428))
Padding(100, 50, 100, 428)	padding:calc(100vw * (100/428)) calc(100vw * (50/428)) calc(100vw * (100/428))
Padding(100, 50, 428)	padding:calc(100vw * (100/428)) calc(100vw * (50/428))

styled-components 조건문 처리

만약 반응형 분기가 2번있고 조건에 따라 스타일링이 달라진다면 아래 코드와 같이 하시면 됩니다.

import { Media, Width } from '@hellojh/easy-media-calc';
const mediaPxTb = 1000;
const tbSize = 1000;

const mediaPxMb = 500;
const mbSize = 500;
function App() {
  return (
      <Test bool={true}>
        qwe
      </Test>
  );
}

export default App;

const Test = styled.div`
  width: 100vw;
  background-color:slategray;

  ${({bool}) =>
    Media(mediaPxTb,[
      "background-color:slateblue",
      Width(bool?1000:500, tbSize),
    ])
    + 
    Media(mediaPxMb,[
      "background-color:salmon",
      Width(bool?500:250, mbSize),
    ])
  }
`