Sass 기초 가이드

기존에 웹 개발을 할 때는 주로 styled component를 이용해서 CSS를 처리했는데 새롭게 맡게된 poc 업무에서 Sass를 사용하게 되어서 Sass의 기초적인 사항들을 정리해보고자 한다.

1. 문법(syntax)

sass의 문법은 SCSS 문법과 들여쓰기 문법 두 가지로 사용할 수 있다. SCSS 문법(.scss)은 CSS의 상위 집합으로 모든 CSS는 SCSS로 사용할 수 있다. 들여쓰기 문법(.sass)는 중괄호{} 대신에 들여쓰기를 사용하여 구문을 중첩하고, 세미콜론; 대신 개행(줄바꿈)으로 각 속성을 구분한다.
SCSS 문법이 보다 일반적으로 많이 사용된다.

// 📁 style.scss
body {
  font: 100% Helvetica;
  color: #333;
}

// 📁 style.sass
body
  font: 100% Helvetica
  color: #333

2. 변수(variable)

스타일 시트에서 특정 속성을 재사용하기 위해서 변수로 저장할 수 있다.
변수를 사용하여 브랜드 색상 작업이나 사이트 일관성 등을 유지하는 등에 유용하게 사용할 수 있다.

Sass

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

3. 중첩(nesting)

Sass를 사용하여 HTML과 동일한 시각적 계층 구조로 CSS 선택자를 중첩할 수 있다.
지나친 중첩은 유지보수를 어렵게 할 수 있으니 유의하여 사용해야 한다.

Sass

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

  li { display: inline-block; }

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

CSS

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

4. 부분 파일(partial)

다른 Sass 파일에서 재사용할 수 있는 CSS 스니펫을 부분 Sass 파일로 만들어서 CSS를 모듈화할 수 있다. 부분 파일은 _partial.scss와 같이 언더바_로 시작하도록 이름을 지어주면 된다. 언더바로 시작하는 파일은 부분 파일로 간주되어 별도의 CSS 파일로 컴파일되지 않는다. Sass 부분 파일은 @use로 불러와 사용할 수 있다.

5. 모듈(module)

@use를 사용하여 Sass를 모듈로 분할하여 사용할 수 있다. @use는 파일을 모듈로 로드하여 파일명을 기반으로 한 네임스페이스를 사용해 변수와 믹스인, 함수 등을 참조할 수 있다. 파일 참조를 사용하면 컴파일 결과물에 참조한 CSS가 포함된다.
@use를 사용할 때는 파일의 확장자명은 적지 않아도 된다.

Sass

// 📁 _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 📁 styles.scss
@use 'base';

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

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

6. 믹스인(mixin)

믹스인을 사용하여 사이트 전체에서 재사용할 수 있는 CSS 선언 그룹을 만들 수 있다. 또한 특정 값을 전달하여 유연한 믹스인을 만들 수도 있다.
믹스인을 만들기 위해서는 @mixin 지시어를 사용하고 이름을 지정한 뒤 @include 지시어와 함께 믹스인을 사용할 수 있다.

Sass

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info { @include theme }
.alert { @include theme($theme: DarkRed); }
.success { @include theme($theme: DarkGreen); }

CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

7. 확장/상속(extend/inheritance)

@extend 지시어를 사용하면 한 선택자에서 다른 선택자로 CSS 속성 집합을 공유할 수 있다.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

위의 예제의 모든 클래스 선택자에서 %message-shared를 확장(extend)하므로 그와 동일한 CSS 속성을 가지게 된다. 따라서 HTML 요소에 여러개의 클래스 이름을 적지 않고도 동일한 효과를 얻을 수 있다. %equal-heights는 extend 되지 않았으므로 CSS가 생성되지 않는다.

8. 연산자(operator)

Sass에서는 +, -, *, %, math.div()와 같은 수학 연산자를 사용할 수 있다.
아래의 예제와 같이 픽셀 값을 이용하여 백분율로 변환하는 등의 작업을 쉽게 수행할 수 있다.

Sass

@use "sass:math";

.container { display: flex; }

article[role="main"] { width: math.div(600px, 960px) * 100%; }

aside[role="complementary"] { width: math.div(300px, 960px) * 100%; }

CSS

.container { display: flex; }

article[role="main"] { width: 62.5%; }

aside[role="complementary"] { width: 31.25%; }