@hellojh/easy-media-calc v1.1.3

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는 문자열처럼 넣어야 합니다.

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

종류

Margin, Padding

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

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

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),
    ])
  }
`