[React] React에서 SASS, SCSS 사용하기

 

Sass

 

Sass는 CSS pre-processor(전처리기)로써 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줍니다.

 

https://sass-guidelin.es/ko/

Sass Guidelines — Korean translation

 

sass설치

$ yarn add node-sass

 

색상관련 git

yeun.github.io/open-color/

Open Color

 

@mixin name {}

여러 중복되는 코드를 방지하기 위해 써주는 문법 중 하나.

@mixin button-color($color) {
  background-color: $color;
  &:hover{
      background-color: lighten($color, 10%); // 색상을 10% 밝게
  }
  &:active {
      background-color: darken($color, 10%);   // 색상을 10% 어둡게
  }
}


&.blue {
  @include button-color($blue)
}

 

 

조건부 스타일링을 할 때 className을 직접 조합해주는 것보다 편하게 작성해주는 모듈

 

설치방법

$ yarn add classnames

classNames("Button", "red");  👉🏻 <className="Button red">
classNames("Button", {red:true}); 👉🏻 <className="Button red (false일 경우 Button만 나옴)">
classNames({Button:true}, {red:true}) 👉🏻 <className="Button red (Button만 true일 경우 Button만 나옴)">

 

import classNames from "classnames";

<button className={classNames("Button", size, color)}>{children}</button>

 

CSS Module

• 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS 클래스가 중첩되는 것을 방지
• CRA(Create React App)프로젝트에서 CSS Module을 사용할 때에는 CSS 파일의 확장자를 .module.css로 만들면 됩니다.
• 파일경로, 파일이름, 클래스이름, 해쉬값등 사용

https://postcss.org/

PostCSS - a tool for transforming CSS with JavaScript

 

styled-components

• JS안에 CSS를 작성하는 것
• styled-components 라이브러리를 사용(emotion, styled-jsx ...)
• Tagged Template Literal 문법을 사용

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN