Sass 소개 및 사용법

Sass란?

Sass는 세상에서 가장 완성도 높고 안정적이며 강력한 CSS 확장 언어라고 소개하고 있다.
Sass는 독자적인 구문(변수, 중첩 규칙, 함수, 컨디션, 루프, 믹스인 등)을 사용할 수 있는 환경을 제공한다.

오늘날 Sass는 가장 인지도가 높은 스타일링 기술이다. (CSS 2023, 설문 통계 기준)

전처리기 (Pre-Processor)

Sass는 쉽게 말해서 다양한 기술들을 사용하여 복잡한 스타일을 쉽게 관리하고, 그 후 CSS파일로 변환하는 '전처리기' 이다.

CSS 그 자체는 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리가 더 어려워지고 있다.
이것이 바로 전처리기가 도움이 될 수 있는 부분이다.
Sass에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 유용한 기능과 같이 아직 CSS 에는 없는 기능이 있다.
Sass를 다루기 시작하면 사전 처리된 Sass 파일을 가져와 웹 사이트 에서 사용할 수 있는 일반 CSS파일로 저장한다.

---

Sass와 SCSS

Sass는 두 가지 다른 문법(Syntax)을 지원한다.

Sass가 등장했을 때 처음 지원되던 방식은 들여쓰기 즉 Indented Syntax 였다. 해당 방식은 중괄호와 세미콜론을 생략하고 선택자의 구조를 들여쓰기로 구분하는 방식이다.

// .sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

2010년 5월 Sass(Version3)가 업데이트 되면서 새로운 문법이 등장했다. 해당 문법은 Sassy CSS의 의미를 담아 기존 Indented Syntax의 문법에 CSS 문법을 더하여 SCSS Syntax 라고 불렸으며 해당 문법은 기존 CSS 구문과 완벽하게 호환되도록 중괄호와 세미콜론 등 CSS와 거의 유사한 방식으로 사용할 수 있었다.

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

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

---

Sass 사용법 및 여러가지 기능

Sass 설치

먼저 Node.js 런타임 환경이 구성되었는지 설치된 node의 버전을 확인한다.

node --version

Sass 설치

npm i -g sass # Sass 패키지를 글로벌로 설치
npm i sass    # Sass 패키지를 로컬로 설치

설치가 정상적으로 완료되었는지 확인.

sass --version

Sass 사용법

기본적인 사용법은 아래의 공식 가이드 문서에 친절하게 설명되어 있다.

Sass 공식 가이드
https://sass-lang.com/guide/

Chrome의 한국어 번역을 사용해도 무리없이 읽을 수 있기 때문에,
추가적인 부분만 아래에 정리함.

Sass 사용법 추가

중첩 접미사 추가

최근에는 표준 css에서도 중첩을 지원하기 때문에,
Sass에서만 가능한 접미사 추가만 정리함.

SCSS

.tabMemu {
  max-width: 640px;
  width: 90%;
  margin: 40px auto;
  &__item {
    display: block;
  }
  &--item {
    display: block;
  }
}

변환된 CSS

.tabMenu {
  max-width: 640px;
  width: 90%;
  margin: 40px auto;
}
.tabMenu__item {
  display: block;
}
.tabMenu--item {
  display: block;
}

@mixin + @media 활용 (+ 모듈)

아래의 코드는
breakpoints 라는 map 변수 선언 및 할당
-> @mixin에 전달받은 $breakpoint라는 prop이 $breakpoints map에 존재하는지 @each와 @if를 사용해서 확인
-> 존재하지 않으면, @error를 사용해 에러 메세지 출력
-> 존재하면, 매개변수로 전달받은 $breakpoint를 key로 $breakpoints map에서 value를 찾아 $viewport 변수에 할당
-> 'sass:string' 모듈의 string.unquote함수를 사용해 "min-width: #{viewport}px" 문자열에서 따옴표를 벗기고 $query 변수에 할당
-> @media 문법을 사용해서 미디어쿼리 스타일 지정
(@content는 @include mq(sm){} 내부의 코드를 가져옴)

// _mixin.scss

@use "sass:string";
@use "sass:map";

// 미디어쿼리 중단점
$breakpoints: (
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  2xl: 1536,
);

// 미디어쿼리 믹스인
@mixin mq($breakpoint) {
  @each $key, $value in $breakpoints {
    @if not map.has-key($breakpoints, $breakpoint) {
      @error '#{$breakpoint}는 유효한 중단점이 아닙니다.(유효한 값:sm, md, lg, xl, 2xl)';
    }
  }

  $viewport: map.get($breakpoints, $breakpoint);
  $query: string.unquote("min-width: #{$viewport}px");

  @media ($query) {
    @content;
  }
}

// mixin 사용

.main {
  width: 100%;
  @include mq(sm) {
    width: 25rem;
  }
}