요즘 개인 프로젝트를 하면서 절실히 느끼는 것인데, 프로젝트를 진행할수록 CSS 코드가 알아보기 힘들 정도로 난잡해진다. 전체 코드의 길이는 너무 길고, 중복되는 코드가 난무하며, 수정 시 고쳐야할 부분이 한 두 군데가 아니다. 뭔가 잘못되고 있다는 불안감이 마음을 짓누른다. “어떻게 하면 CSS를 더 효과적으로 작성하고 관리할 수 있을까?”라는 고민이 든다.

바야흐로, CSS의 전처리기 Sass를 도입할 적기라고 생각한다! 그래서 이번 글에서는 Sass의 기본 개념을 정리해보도록 하겠다.

Sass 개요

Sass 로고 이미지

…“초능력을 가진 CSS”라는 슬로건이 인상적이다

Sass(Syntactically Awesome StyleSheets)는 CSS의 전처리기(pre-processor)이다. CSS의 단점을 보완하여 가독성이 뛰어나고 재사용이 높은 CSS를 작성하기 위한 CSS의 확장이다.

상술하였듯이, CSS는 프로젝트의 규모가 커질수록 쉽게 지저분해지고 유지보수가 어려워진다. 이에 Sass는 변수, 조건문, 반복문, Nesting, Mixin 등의 문법을 제공하여 CSS의 한계를 보완한다. Sass는 다음과 같은 장점이 있다.

CSS보다 단순한 표기법으로 CSS를 구조화하여 표현한다.
팀원간의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화한다.
Mixin 등의 강력한 기능을 바탕으로 유지보수 편의성을 크게 향상시킨다.

문법과 예제

1. 데이터 타입

Sass에는 7가지의 데이터 타입이 존재한다.

  • 숫자
  • 문자열
  • 컬러 (green, #02a1f9 등)
  • boolean
  • null (null인 변수가 지정된 프로퍼티는 트랜스파일링되지 않는다)
  • list
  • map (key1: value1, key2: value2)

2. 변수

Sass에서는 숫자, 문자열, 컬러 등을 변수에 저장하여 사용할 수 있다. 변수의 앞글자는 $로 표기한다.

$site_max_width: 1080px;
$font_size: 20px;
$font_color: #333;

body {
  width: 100%;
  max-width: $site_max_width;
  font-size: $font_size;
  color: $font_color;
}

아래는 트랜스파일링 된 CSS 코드이다.

body {
  width: 100%;
  max-width: 1080px;
  font-size: 20px;
  color: #333;
}

한편, 변수에는 유효범위(scope)가 있다. 코드 블록 내에서 선언한 변수는 지역변수다. 지역변수의 스코프는 자신이 속한 코드 블록과 하위 코드 블록이다.

Top level에서 선언한 변수는 전역변수다. 전역변수는 전역은 물론이고 하위의 모든 코드 블록 내에서 유효하다. !global라는 키워드를 통해 지역변수를 전역변수로 바꿀 수도 있다.

box {
  $color: #000 !global; // 전역 변수
  width: $width;
}

!default를 사용하면 할당되지 않은 변수의 디폴트 값을 설정할 수 있다. 이미 할당된 변수에는 !default를 사용해도 적용되지 않는다.

$content: null;
$content: "hello" !default;
$font_size: 20px;
$font_size: 16px !default; 

#main {
  content: $content; // "hello"
  font-size: $font_size; // 20px
}

3. Nesting

Nesting은 선언을 중첩하는 것을 말한다. CSS의 후손 셀렉터의 경우, 부모 요소를 매번 작성해야하는 번거로움이 있는데 Nesting을 사용하면 이를 간단히 작성할 수 있다. 또한, HTML의 구조와 유사한 CSS의 작성이 가능해진다.

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

  ul {
    list-style-type: none;
  }

  li {
    display: inline-block;
    a {
      padding: 5px;
    }
  }
}

부모 요소를 참조하는 연산자로 &을 사용할 수 있다. 특히, 가상 클래스 선택자를 지정할 경우 부모 요소의 참조가 필요하다.

button {
  background-color: #fff;

  &:hover {
    background-color: red;
  }

  &.home {
    text-decoration: underline;
  }

nesting은 프로퍼티에도 사용이 가능하다.

body {
  font: {
    family: 'Roboto';
    size: 1.2rem;
    weight: bold;
  }
}

body {
  font-family: 'Roboto';
  font-size: 1.2rem;
  font-weight: bold;
}

참고자료

https://poiemaweb.com

(글에서 틀린 것이 있다면 꼭 지적해 주세요. 감사히 배우겠습니다)