SCSS와 자동화

#1 SCSS

#1-1 WhatㆍWhy

SASS

Sass: Syntactically Awesome Style Sheets

CSS는 문법이 간결해서 좋지만, 유연함이 부족하기에 코드가 길어질수록 유지보수가 어려워진다. 이 단점(유연함)을 극복하기 위한 전처리기로서 SASS가 개발되었다.

 

SCSS

SCSS는 Sassy CSS라는 뜻으로, CSS에서 익숙히 사용했던 중괄호나 각종 문법을 사용한 SASS다. 아래에서 SCSS의 문법을 소개할 것인데, 원래 CSS를 알고 있는 사람이라면 바로 익힐 수 있을 것이다.

 

#1-2 How

Sass: Sass Basics

공식 가이드다. 영어로 된 페이지지만 괜찮다. 스크롤을 내려가면서 코드만 보면 된다. CSS 코드가 SCSS로는 어떻게 서술되는지만 보자. 보는 것과 동시에ㆍ실시간으로 SCSS를 익히게 될 것이고, 마지막 코드까지 보고 나면 문법은 통했다고 볼 수 있다.

 

#2 사용 노하우

#2-1 쉬운 계층화의 함정

클래스 별 속성을 나열한 표

<li> (HTML element)가 지녀야 하는 5개의 클래스와 클래스들의 속성들을 나열한 표다. 여기에 기반하여, 아래에 SCSS 코드를 짜보았다.

 

코드 1

li {
  &.a {
    width: 300px;
    top: 70px;
    color: $my-color-1;
  }
  &.b {
    width: 500px;
    top: 70px;
    color: $my-color-1;
  }
  &.c {
    width: 300px;
    top: 70px;
    color: $my-color-2;
  }
  &.d {
    width: 500px;
    top: 20px;
    color: $my-color-2;
  }
  &.e {
    width: 300px;
    top: 20px;
    color: $my-color-3;
  }
}

SCSS의 쉬운 계층화에 신이 나서(?) 막 SCSS를 적다 보면 이런 코드를 쓰기 십상이다. 게다가 뭔가 깔끔해 보이지 않는가? 하지만 유지보수를 위해 코드를 수정해야 할 일이 생기면 골치가 아파진다.

 

코드 2

li {
  // 크기 (width 등)
  &.a, &.c, &.e { width: 300px; }
  &.b, &.d { width: 500px; }
  
  // 위치 (top 등)
  &.a, &.b, &.c { top: 70px; }
  &.d, &.e { top: 20px; }
  
  // 모양 (color 등)
  &.a, &.b { color: $my-color-1; }
  &.c, &.d { color: $my-color-2; }
  &.e { color: $my-color-3; }
}

반면 2번째 코드와 같은 스타일은 어떨까? 이 코드는 li가 변하는 기준점을 중심으로 짠 코드다. 이 스타일은 SRP 원칙과도 맞닿는다. SCSS에는 클래스가 없지만, 그 대신 하나의 코드 뭉치를 클래스처럼 생각하는 것이다 (2번째 코드에서 li는 총 3개의 코드뭉치를 지님). 예를 들어 li의 위치를 수정해야 하면, 2번째 코드 뭉치만 수정하면 끝이다. 첫 번째 코드와는 비교가 실례인 수준의 수정 난이도다.

 

#2-2 2가지 주석

// (SASS 전용 주석 스타일) 변환된 CSS에서는 보이지 않을 정보↓
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

/* (원래 주석 스타일) 변환된 CSS에서도 보일 정보 ↓*/
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
}

SCSS에서는 CSS에서 사용할 수 없었던 // 주석도 사용할 수 있다. CSS에서는 사용 불가하기에, CSS로 변환 시에 // 주석은 사라진다. 따라서 // 주석은 SCSS만의 코드를 설명할 때 사용하면 된다. 반면, CSS 변환 후에도 보일 부분은 원래 CSS의 주석인 /**/ 주석을 쓰자. 일단 한 번 SCSS를 쓰기 시작하면, CSS는 (직접 수정하는 일 없이) '출력물 파일'로서만 취급하게 된다. 그럼에도 앞일은 모르는 법이다. CSS 코드를 직접 보게 될 잠재적인 미래를 위해 /**/ 주석도 쓰자는 것이다.

 

#3 SCSS → CSS 변환

#3-1 컴파일러 설치 및 변환

다운로드

먼저 공식 다운로드 페이지에서, CLI 프로그램의 형태인 SASS 컴파일러를 다운로드한다.

 

설치

다운로드 후 압축을 풀면 나오는 폴더의 경로를 Path(in 시스템 변수)에 저장한다. 저장 후, 재부팅한다. 재부팅 후 CMD 창을 켜서,

sass --version

을 입력했을 때 버전 값이 출력된다면 성공이다.

 

변환

1. 변환할 scss 파일이 있는 디렉토리에서 빈 공간 우클릭 - [터미널에서 열기]
2. "sass example.scss example.css" 입력

 

#3-2 자동 변환 도구

#3-1의 컴파일러가 자동으로 작동되면 참 좋을 것이다. 그리고 그 생각을 우리만 할 리가 없다. 여러 IDE에서는 SASS 계열 파일을 CSS로 자동 변환해주는 도구를 제공한다. 내가 사용한 IDE는 JetBrains사의 WebStorm이다.

 

#3-3 Watcher 설정법

WebStorm에서

[File (파일)] - [Settings (설정)] - [Tools (도구)] - [File Watchers (파일 감시기)] - [+] - [SCSS]

로 들어가면, 아래와 같은 창이 뜬다.

 

웬만한 상황에서는 위와 똑같이 하면 된다. 추가 설명이 필요한 경우, 왼쪽 아래에 있는 [?] 버튼을 누르면 된다 (2025.02 버전의 WebStorm에서 [?] 버튼을 누를 시 뜨는 페이지). LLM의 답변을 빠르게 받아볼 수 있는 환경이라면 그냥 스크린샷을 통째로 올리고 설명해달라고 해도 좋다.

 

#3-4 결과 예시

이제 SCSS 파일에서 한 단 글자만 수정해도, CSS 출력 파일이 실시간으로 업데이트된다.