Polished.js로 JS에서 CSS를 작성할 때 Sass-style functions 사용하기

2019-07-31

Sass와 같은 CSS pre-processor를 사용해서 CSS를 작성해보셨다면, darken, lighten, opacify등 Sass에 내장된 함수들을 많이 사용해보셨을 겁니다.

해당 함수들을 사용하면 손쉽게 특정 색깔의 명도, 휘도, 채도를 변경할 수 있지만, Styled-components와 같은 CSS-in-JS 라이브러리를 사용해서 스타일링을 하게 되면 Scss와 동일한 방식으로 nesting(중첩) 되게 CSS를 선언할 수 있지만 Sass에 내장된 함수들은 사용할 수 없었습니다.

// css style
.outer {
  background-color: gray;
}
.outer .inner {
  font-size: 2rem;
}

// scss style
.outer {
  background-color: gray;
  .inner {
    font-size: 2rem;
  }
}

그래서 JS에서 CSS를 작성할 때도 darken, lighten과 같은 Sass-style의 functions를 사용할 수 있게 해주는 polished.js가 개발되었습니다.

Polished.js란?

polished.js는 Styled-components팀에서 개발한 Sass-style 함수들과 mixins 함수들 모음입니다.

polished.js는 CSS in JS 라이브러리(Styled-components, emotion, JSS, etc...)와 inline styles에서 사용할 수 있습니다.

설치

npm이나 yarn을 사용해서 polished.js를 설치해줍니다.

npm i polished

# 또는 yarn add polished

색상(hue) 변경

adjustHue(degree: (number | string), color: string): string

adjustHue함수는 sass의 adjust-hue와 동일한 역할을 합니다.

함수의 두 번째 인자로 받은 색깔의 색상 값(hue)을 첫 번째 인자로 받은 degree값만큼 조정합니다.

degree값은 0부터 360도까지 입력 가능합니다.

// inline Style에서 사용
const styles = {
  background: adjustHue(180, '#448'),
  background: adjustHue('180', 'rgba(101,100,205,0.7)'),
}

// styled-components에서 사용
const div = styled.div`
  background: ${adjustHue(180, '#448')};
  background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
`

// 출력값
element {
  background: "#888844";
  background: "rgba(136,136,68,0.7)";
}

채도(saturation) 변경

saturate(amount: (number | string), color: string): string,
desaturate(amount: (number | string), color: string): string

saturate함수와 desaturate함수는 sass의 동일한 이름의 함수와 동일한 역할을 합니다.

saturate함수는 두 번째 인자로 받은 색깔의 채도를 첫 번째 인자로 받은 값만큼 증가시키며,

desaturate함수는 채도를 감소시킵니다.

amount값은 0부터 1까지 입력 가능합니다.

// inline Style에서 사용
const styles = {
  background: saturate(0.2, '#CCCD64'), // 20%만큼 채도 증가
  background: desaturate(0.2, '#CCCD64') // 20%만큼 채도 감소
}

// styled-components에서 사용
const div = styled.div`
  background: ${saturate(0.2, '#CCCD64')};
  background: ${desaturate(0.2, '#CCCD64')};
`

// 출력값
element {
  background: "#e0e250";
  background: "#b8b979";
}

휘도(lightness) 변경

darken(amount: (number | string), color: string): string
lighten(amount: (number | string), color: string): string

darken함수와 lighten함수는 sass의 동일한 이름의 함수와 동일한 역할을 합니다.

lighten함수는 두 번째 인자로 받은 색깔의 휘도를 첫 번째 인자로 받은 값만큼 증가시키며,

darken함수는 휘도를 감소시킵니다.

amount값은 0부터 1까지 입력 가능합니다.

// inline Style에서 사용
const styles = {
  background: lighten(0.2, '#FFCD64'), // 20%만큼 휘도 증가
  background: darken(0.2, '#FFCD64'), // 20%만큼 휘도 감소
}

// styled-components에서 사용
const div = styled.div`
  background: ${lighten(0.2, '#FFCD64')};
  background: ${darken(0.2, '#FFCD64')};
`

// 출력값
element {
  background: "#e5e6b1";
  background: "#ffbd31";
}

불투명도 변경

opacify(amount: (number | string), color: string): string
transparentize(amount: (number | string), color: string): string

opacify함수와 transparentize함수는 sass의 동일한 이름의 함수와 동일한 역할을 합니다.

opacify함수는 두 번째 인자로 받은 색깔의 불투명도를 첫 번째 인자로 받은 값만큼 증가시키며,

transparentize함수는 불투명도를 감소시킵니다(더 투명해지게함).

amount값은 0부터 1까지 입력 가능합니다.

// inline Style에서 사용
const styles = {
  background: opacify(0.1, '#fff');
  background: transparentize(0.1, '#fff');
}

// styled-components에서 사용
const div = styled.div`
  background: ${opacify(0.1, '#fff')};
  background: ${transparentize(0.1, '#fff')};
`

// 출력값
element {
  background: "rgba(255,255,255,1.1)";
  background: "rgba(255,255,255,0.9)";
}

mixins

polished.js는 Sass-style 함수들뿐만 아니라 자주 사용되는 css 코드들을 간편하게 사용할 수 있게 해주는 mixin 함수들도 포함하고 있습니다.

// clearFix 적용
const div = styled.div`
  ${clearFix()}
`

// 출력값
element::after {
  'clear': 'both',
  'content': '""',
  'display': 'table'
}

// text를 숨기고 background-image만 표시
const div = styled.div`
  backgroundImage: url(logo.png);
  ${hideText()};
`

// 출력값
element {
  'backgroundImage': 'url(logo.png)',
  'textIndent': '101%',
  'overflow': 'hidden',
  'whiteSpace': 'nowrap',
}


이글에서 소개된 함수들 이외에도 약 70여 개의 함수들을 polished.js가 포함 하고 있습니다.

만약 더 자세히 알고 싶으시면 polished.js 공식 docs를 참고해주세요.

Reference

comment

Comments