React - Sass

Sass...??

Syntactially Awesome Style Sheets, 기존 CSS파일의 불편한 부분을 개선하고자 나온 CSS 전처리기 중 하나이다.

sass 설치

npm install sass

sass vs scss
sass 문법을 개선한 것이 scss 문법으로 더 넓은 범용성과 CSS 호환성 등의 장점이 있기 때문에 scss 문법을 사용하는 것이 권장된다.

💡 SPA환경에서는 각각의 JS 파일에서 독립적으로 css파일을 임포트 했더라도 Router.js에 모든 페이지 컴포넌트가 모이고, index.js를 거쳐 index.html에 모이는 구조를 가지고 있기 때문에 Sass의 nesting기능을 통해 자손결합자를 작성해주면 className의 충돌을 없앨 수 있고 유지보수나 에러를 고칠 때 훨씬 수월해진다.

Nesting

마치 HTML 구조처럼 nav로 자식 관계에 있는 스타일을 품고, 그 안에 다른 태그들의 스타일을 적용하는 방법을 구현할 수 있다. 오류를 빠르게 수정할 수 있는 장점이 있다.

// src/pages/Login/Login.scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

변수

여러 곳에서 사용되거나 오타가 나기 쉬운 속성을 변수로 만들어 원하는 곳에서 사용할 수 있다.

// Sass 변수 활용 예시

$primary-color: #333;

body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  background-color: $primary-color;
  color: white;
}

& 선택자

Nesting 내부에서 & 선택자는 부모 선택자로 치환된다.

// Sass & 선택자 활용 예시

button {
  width: 200px;
  height: 50px;

  &:hover {
    width: 400px;
    height: 100px;
  }
}

/* Compile to CSS */

button {
  width: 200px;
  height: 50px;
}

button:hover {
  width: 400px;
  height: 100px;
}

mixin

변수 기능과 마찬가지로 중복되는 스타일 속성이 있을 때 사용하는 방법인데, 중복되는 스타일 속성이 여러 개가 있을 때 한번에 묶어서 사용하기 좋은 방법이다.(마치 스타일을 묶어 놓은 함수와 같은 느낌...?)

// Sass mixin 활용 예시

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  @include flexCenter;
}

중복되는 스타일이지만 안의 value값을 변경하고 싶다면, 인자를 넣어서 스타일의 속성 틀은 유지한 채, 스타일 속성에 적용되는 값을 변경해서 적용할 수 있다. 만약 필요없는 값이 있다면 null을 넣어주면 잘 작동한다.

// Sass mixin 인수 활용 예시

@mixin flexSort($justify, $alignItems) {
  display: flex;
  justify-content: $justify;
  align-items: $alignItems;
}

.info {
  @include flexSort('space-between', 'center');
}

.feed {
  @include flexSort('space-around', 'center');
}