Sass

Sass

Sass는 Syntactically Awesome Stylesheet(문법적으로 엄청나게 멋진 스타일시트)의 줄임말로 기존 CSS의 단점을 보완하기 위해 만들어진 스크립팅 언어인 동시에 CSS 전처리기(pre-processor)이기도 합니다.

기존의 CSS 문법은 단순 반복되는 코드가 많았기에 프로젝트의 크기가 커질수록 작성되는 CSS 코드의 양도 많아지고 복잡해짐에 따라 유지 보수가 힘들었습니다. 또한, 다른 프로그래밍 언어에서는 기본적으로 제공되는 기본적인 연산 기능이나 함수 등을 미지원함으로 인해 언어적 한계성도 가지고 있었습니다.

이에 Sass는 기존의 CSS 문법을 확장하여 반복되는 중첩 구문을 간결하게 만듦으로써 코드의 가독성을 높였습니다. 그리고 변수나 함수, 반복문, 조건문 등을 사용할 수 있도록 지원하고 있으며, Mixin 기능을 제공함으로써 코드의 재사용성을 높일 수 있도록 개발되었습니다.

Sass에서는 *.sass와 *.scss라는 두 가지 확장자를 지원하며, 기본적으로 CSS 문법을 확장하여 만든 언어이기 때문에 기존에 작성한 CSS 파일을 확장자만 *.sass 또는 *.scss로 변경해도 정상적으로 동작합니다.

하지만 웹 브라우저는 스크립팅 언어인 Sass 파일을 인식할 수 없기 때문에 Sass로 작성된 코드는 별도의 컴파일러를 통해 웹 브라우저가 인식할 수 있는 일반적인 CSS 코드로 변환되어야만 합니다.

이번 장에서는 React에서 Sass를 적용하는 방법을 위주로 설명할 예정이므로, Sass에 대해 좀 더 자세히 알고 싶다면 공식 문서를 참고하시기 바랍니다.

◎ Sass 공식 홈페이지 (https://sass-lang.com/documentation/)

Sass와 SCSS

Sass는 크게 Sass와 SCSS로 구분할 수 있습니다. SCSS는 Sassy CSS(Sass한 듯한 CSS)의 줄임말로 Sass보다 늦게 개발되었지만, 좀 더 넓은 범용성과 CSS와의 완벽한 호환성이라는 장점을 가지고 있어서 현재 널리 사용되고 있습니다.

두 문법 사이의 가장 큰 차이점으로는 Sass는 들여쓰기를 사용하여 중첩을 표현하고, 속성들을 줄바꿈으로 구분합니다. 하지만 SCSS는 중괄호({})를 사용하여 중첩을 표현하고, 속성들을 세미콜론(;)으로 구분합니다.

nav ul {
  margin: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
}

nav
  ul
    margin: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
  }
}

SCSS는 Sass의 문법에 기존 CSS에서 사용한 중괄호({})를 추가함으로써 코드의 가독성을 높이고 잘못된 들여쓰기나 줄바꿈으로 인한 실수를 미연에 방지할 수 있게 해줍니다.

React에서 Sass 사용하기

React에서 sass를 사용하기 위해서는 우선 node-sass 라이브러리를 설치해야 합니다.

그리고 기존에 사용하던 CSS 파일의 확장자를 *.scss로 변경합니다. SCSS는 기존 CSS 문법과 완전히 호환되므로 기존에 작성한 코드를 변경할 필요가 없습니다. 이제 SCSS 파일 내 CSS 코드를 SCSS 문법으로 바꿔주기만 하면 됩니다.

다음 예제는 Menu 컴포넌트에 SCSS 스타일링을 적용한 아주 간단한 메뉴 예제입니다.

const Menu = () => {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Service</li>
        <li>Contact</li>
      </ul>
    </nav>
  );
};


export default Menu;

$primary-color: #93BFCF;
$secondary-color: #6096B4;

@mixin hover-text {
  text-transform: uppercase;
  font-weight: 600;
}

nav {
  margin: 20px;
  background-color: $primary-color;

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

    li {
      padding: 20px;
      display: inline-block;
      text-align: center;

      &:hover{
        background-color: $secondary-color;
        @include hover-text;
      }
    }
  }
}

위의 예제에서 사용된 SCSS 문법에 대해 간략히 설명하면, 우선 SCSS는 중괄호를 사용함으로써 스타일 간의 계층 구조를 한 눈에 파악할 수 있습니다. 또한, '$' 문자를 사용하여 변수를 정의하고 사용함으로써 기존 CSS 문법에서는 특정 리터럴 값이 어느 곳에 사용되었는지 한 눈에 파악하기 힘든 단점을 해결하였습니다.

$primary-color: #93BFCF;
$secondary-color: #6096B4;

그리고 함수와 비슷한 동작을 하는 mixin 기능을 통해 반복적으로 재사용되는 CSS 스타일을 하나의 그룹으로 정의하여 사용할 수 있습니다.

@mixin hover-text {
  text-transform: uppercase;
  font-weight: 600;
}
...
&:hover{
  background-color: $secondary-color;
  @include hover-text;
}

CSS 문법을 확장하여 기존 CSS 스타일링에서의 여러 단점들을 개선한 Sass도 전처리를 위한 별도의 컴파일러가 필요하고, 컴파일하는데 추가적인 시간이 소요된다는 단점을 가지고 있습니다.

따라서 Sass를 사용하는 것이 CSS를 사용하는 것보다 무조건 더 좋다는 의미가 아니며, 프로젝트의 상황 및 특성을 고려하여 CSS와 Sass 중 적합한 스타일링 방식을 선택하여 사용하는 것이 중요합니다.

연습문제

• 연습문제1
• 연습문제2
• 연습문제3
• 연습문제4
• 연습문제5