Sass 및 Pre-processors (r1)

CSS Pre-processor는 CSS의 한계를 극복하고 개발 효율성을 높이기 위해 등장한 도구이다. 기본적으로 CSS는 변수, 함수, 논리 연산 등의 프로그래밍적 기능을 제공하지 않는 선언형 언어이다. 이로 인해 대규모 프로젝트에서는 스타일 코드의 재사용성과 유지보수성이 떨어지고, 반복적인 코드 작성이 불가피해진다.

CSS Pre-processor는 이러한 문제를 해결한다. 개발자는 Sass, Less, Stylus와 같은 전처리기의 확장 문법(예: 변수, 중첩 규칙, 믹스인, 상속)으로 스타일시트를 작성한다. 작성된 코드는 전처리기가 표준 CSS 문법으로 컴파일되어 브라우저가 해석할 수 있는 형태로 변환된다[1]. 이 과정을 통해 개발자는 보다 체계적이고 강력한 방식으로 스타일을 관리할 수 있다.

주요 필요성은 다음과 같이 정리할 수 있다.

결국, CSS Pre-processor는 CSS에 프로그래밍 언어의 편의 기능을 도입함으로써, 개발자가 더 적은 코드로 더 많은 작업을 수행하고, 스타일 시스템을 체계적으로 구축할 수 있게 해준다. 이는 특히 디자인 시스템을 적용하거나 팀 단위로 협업하는 프로젝트에서 그 가치가 두드러진다.

CSS Pre-processor는 순수 CSS에는 존재하지 않는 프로그래밍 언어적 기능을 제공하여 스타일시트 작성을 더욱 효율적이고 체계적으로 만든다. 주요 기능은 크게 코드의 재사용성 향상, 유지보수성 강화, 논리적 구조화로 요약할 수 있다.

가장 기본적이고 핵심적인 기능은 변수(Variables)를 사용하는 것이다. 색상, 폰트, 여백 등 자주 사용하는 값을 변수에 저장하여 일관된 디자인 시스템을 구축하고, 값 변경 시 한 곳만 수정하면 전체에 반영되도록 한다. 또한, 중첩(Nesting)을 통해 선택자(Selector)의 계층 구조를 시각적으로 명확하게 표현할 수 있어, 불필요한 반복을 줄이고 코드 가독성을 높인다.

논리적 연산과 재사용을 위한 기능도 제공한다. 믹스인(Mixins)은 인자를 받을 수 있는 재사용 가능한 스타일 블록을 정의하여, 벤더 프리픽스가 필요한 속성이나 복잡한 그리드 레이아웃과 같은 패턴을 쉽게 적용할 수 있게 한다. 상속(Extend/Inheritance) 기능은 한 선택자의 스타일을 다른 선택자가 그대로 물려받도록 하여, 중복 코드를 최소화한다. 조건문(@if, @else)과 반복문(@for, @each, @while)을 사용하여 동적인 스타일 생성을 가능하게 하는 것도 중요한 특징이다.

마지막으로, 모듈화 기능을 통해 스타일시트를 여러 개의 파일로 분할하고 관리할 수 있다. @import 규칙이나 더 현대적인 @use 규칙을 사용하여 변수, 믹스인, 함수, 스타일을 논리적 단위로 묶어 프로젝트 구조를 체계적으로 설계하는 것이 가능해진다. 이러한 기능들은 최종적으로 모두 표준 CSS 문법으로 컴파일되어 브라우저에서 해석된다.

Sass는 두 가지 구문을 제공한다. 하나는 들여쓰기(indented)를 기반으로 한 Sass 구문이고, 다른 하나는 중괄호와 세미콜론을 사용하는 SCSS 구문이다. SCSS 구문은 기존 CSS 문법의 상위 집합(superset)으로 설계되어, 모든 유효한 CSS 코드는 그대로 유효한 SCSS 코드로 인식된다. 이는 기존 CSS 프로젝트를 점진적으로 Sass로 전환하는 데 유리한 특징이다.

Sass 구문(종종 '들여쓰기 구문'이라고 함)은 중괄호와 세미콜론을 전혀 사용하지 않는다. 대신, 규칙의 계층 구조는 들여쓰기로 표현되며, 속성과 값의 구분은 줄 바꿈으로 처리된다. 이 구문은 더 간결하고 작성 속도가 빠르다는 평가를 받지만, 기존 CSS와의 차이가 크다는 점이 진입 장벽이 될 수 있다. 반면, SCSS 구문은 기존 CSS 작성자에게 친숙한 형태를 유지하면서 Sass의 모든 고급 기능을 사용할 수 있게 한다.

두 구문 간의 주요 차이점을 다음 표로 정리할 수 있다.

현재는 SCSS 구문이 더 널리 채택되어 사실상의 표준으로 자리 잡았다. 대부분의 문서, 커뮤니티 자료, 그리고 빌드 도구의 기본 설정이 SCSS를 기준으로 한다. 따라서 새로운 프로젝트를 시작할 때는 SCSS 구문을 사용하는 것이 일반적이다. Sass 구문은 여전히 지원되지만, 레거시 프로젝트나 특정 선호도를 가진 경우를 제외하고는 사용 빈도가 낮다.

Sass를 사용하기 위해서는 Ruby 기반의 원래 구현체나, 현재 더 널리 쓰이는 Node.js 기반의 Dart Sass를 설치해야 한다. Dart Sass는 공식적인 구현체로, npm을 통해 쉽게 설치할 수 있다.

설치는 주로 npm이나 yarn 같은 패키지 관리자를 통해 이루어진다. 프로젝트의 로컬 의존성으로 설치하거나, 개발 작업을 위해 전역으로 설치할 수 있다. 설치 후에는 .scss 또는 .sass 확장자의 파일을 작성하고, Sass 컴파일러를 실행하여 일반 CSS 파일로 변환한다. 컴파일 명령은 sass input.scss output.css와 같은 형태이다.

개발 환경에서는 파일 변경을 감지하여 자동으로 컴파일해주는 --watch 플래그를 자주 사용한다. 또한, Webpack, Gulp, Grunt 같은 빌드 도구와 연동하거나, VS Code 등의 코드 편집기에서 확장 프로그램을 설치하여 통합 개발 환경을 구성하는 것이 일반적이다. 컴파일 시 출력 스타일(예: 압축된 compressed 형식)을 지정할 수도 있다.

변수는 Sass에서 값을 저장하고 재사용하기 위한 기본 기능이다. 변수를 사용하면 색상, 폰트 스택, 여백 크기 등 자주 사용하는 값을 한 곳에서 정의하고, 전체 스타일시트에서 참조할 수 있다. 이는 일관된 디자인 시스템을 유지하고, 나중에 값을 변경해야 할 때 한 번만 수정하면 되므로 유지보수성을 크게 향상시킨다.

변수는 달러 기호($)로 시작하며, 콜론(:)을 사용하여 값을 할당한다. 변수에 할당할 수 있는 값으로는 문자열, 숫자, 색상, 불리언, 리스트, 맵, null 등이 있다. 변수는 선언된 블록 내에서만 유효한 지역 범위를 가지며, !global 플래그를 사용하여 전역 변수로 만들 수 있다.

다음은 변수를 사용한 간단한 예시이다.

```scss

// 변수 정의

$primary-color: #333;

$font-stack: Helvetica, sans-serif;

$spacing-unit: 1rem;

// 변수 사용

body {

font-family: $font-stack;

color: $primary-color;

margin: $spacing-unit;

}

```

변수는 연산과 함께 사용될 수 있으며, 믹스인이나 함수의 매개변수로 전달하는 것도 가능하다. 또한, 변수 이름에 하이픈(-)과 언더스코어(_)는 서로 구분하지 않으므로 $main-color와 $main_color는 동일한 변수로 간주된다[4].

중첩은 CSS 규칙을 HTML 요소의 계층 구조와 유사하게 작성할 수 있게 해주는 기능이다. 이를 통해 상위 선택자 내부에 하위 선택자를 포함시키는 방식으로 코드를 구성할 수 있다.

기본적인 사용법은 상위 선택자의 블록({}) 안에 하위 선택자를 작성하는 것이다. 이는 시각적 계층을 명확히 하고, 반복적으로 상위 선택자를 작성하는 번거로움을 줄여준다. 또한, 가상 클래스나 가상 요소도 동일한 방식으로 중첩하여 작성할 수 있다.

과도한 중첩은 불필요하게 복잡하고 특정도가 높은 CSS 선택자를 생성할 수 있어 유지보수를 어렵게 만든다. 일반적으로 3~4단계를 넘지 않는 중첩을 권장한다. & 기호는 부모 선택자를 참조하며, 주로 BEM 방법론과 같은 네이밍 규칙을 적용하거나, :hover, ::before 같은 상태와 요소를 연결할 때 유용하게 사용된다.

믹스인은 재사용 가능한 스타일 블록을 정의하여 프로젝트 전반에 걸쳐 포함하고 재사용할 수 있게 해주는 기능이다. 함수와 유사하게 매개변수를 받을 수 있어, 유연하게 스타일을 생성하고 반복 코드를 줄이는 데 핵심적인 역할을 한다. @mixin 지시어로 정의하고, @include 지시어로 호출하여 사용한다.

믹스인은 매개변수와 기본값 설정이 가능하며, 로직을 포함할 수 있다. 예를 들어, 벤더 프리픽스를 처리하거나 반응형 디자인의 미디어 쿼리를 간편하게 생성하는 데 자주 활용된다. 다음은 간단한 박스 그림자 믹스인의 예시이다.

```scss

@mixin box-shadow($x, $y, $blur, $color) {

-webkit-box-shadow: $x $y $blur $color;

-moz-box-shadow: $x $y $blur $color;

box-shadow: $x $y $blur $color;

}

.card {

@include box-shadow(0, 2px, 4px, rgba(0,0,0,.1));

}

```

믹스인과 상속(Extend/Inheritance) 기능은 코드 재사용 측면에서 유사하지만, 생성되는 CSS의 방식에서 차이가 있다. 믹스인은 호출된 곳마다 스타일 블록의 내용을 복사하여 출력하는 반면, @extend는 선택자들을 그룹화하여 출력한다. 이로 인해 믹스인은 매개변수를 통한 동적 스타일 생성에 유리하고, @extend는 정적으로 연관된 선택자들의 스타일을 통합할 때 유리하다. 과도한 믹스인 사용은 중복 코드를 증가시킬 수 있으므로, 상황에 맞게 선택하여 사용해야 한다.

Sass의 상속 기능은 @extend 지시어를 사용하여 한 선택자의 스타일을 다른 선택자가 그대로 물려받도록 한다. 이는 객체 지향 프로그래밍의 상속 개념과 유사하며, 코드의 재사용성을 높이고 중복을 줄이는 데 목적이 있다.

@extend는 공통된 스타일을 가진 클래스나 플레이스홀더 선택자(예: %message-shared)를 정의한 후, 다른 선택자에서 이를 확장하여 사용한다. 예를 들어, .message 클래스의 기본 스타일을 .success, .warning, .error 클래스가 상속받도록 할 수 있다. 이때 Sass는 컴파일 과정에서 이 선택자들을 그룹화하여 최적화된 CSS를 생성한다. 결과적으로 동일한 스타일 규칙을 공유하는 선택자들이 콤마로 구분된 하나의 그룹으로 출력되어, 최종 CSS 파일의 용량이 줄어드는 장점이 있다.

그러나 @extend는 주의해서 사용해야 한다. 무분별한 상속은 의도하지 않은 선택자 그룹화를 초래하여 CSS의 특이성을 복잡하게 만들거나, 소스 코드에서 상속 관계를 추적하기 어렵게 만든다. 또한, 미디어 쿼리 블록 내부에서 외부 선택자를 확장하는 것은 제한된다. 이러한 이유로 많은 실무 가이드에서는 재사용이 필요한 스타일 블록은 @extend보다 믹스인(Mixins)을 사용하도록 권장한다. 믹스인은 인자를 받을 수 있고, 출력 위치를 더 명확하게 제어할 수 있기 때문이다.

Sass의 모듈화는 코드를 논리적 단위로 분리하고 재사용성을 높이는 핵심 기능이다. 이를 위해 _(언더스코어)로 시작하는 파일명을 가진 Partial 파일과 이를 불러오는 @import 또는 @use 규칙을 사용한다. Partial 파일은 단독으로 CSS 파일로 컴파일되지 않으며, 주로 변수, 믹스인, 함수 또는 특정 컴포넌트의 스타일을 독립적으로 관리하기 위해 작성된다. 예를 들어, _variables.scss, _mixins.scss, _buttons.scss와 같은 파일을 생성하고 메인 Sass 파일에서 불러와 사용한다.

초기에는 @import 지시어가 모듈을 불러오는 표준 방식이었다. 그러나 @import는 전역 네임스페이스를 오염시키고, 변수나 믹스인의 중복 로드 및 의존성 관리 문제를 일으킬 수 있다는 단점이 있다. 이를 해결하기 위해 도입된 @use 규칙은 더 엄격하고 모듈화된 시스템을 제공한다. @use를 사용하면 불러온 모듈의 변수, 믹스인, 함수는 해당 모듈의 네임스페이스를 통해 접근해야 하며, 명시적으로 공개(@forward)하지 않은 멤버는 외부에서 사용할 수 없다.

@import와 @use의 주요 차이점은 다음과 같다.

모듈화의 실무 적용은 프로젝트 구조 설계의 기초가 된다. 일반적으로 base/, components/, layout/, utils/ 등의 디렉터리를 만들고, 각각에 해당하는 Partial 파일(_reset.scss, _grid.scss, _buttons.scss 등)을 구성한다. 메인 파일(예: main.scss)에서는 @use 규칙을 사용해 이러한 모듈들을 계층적으로 불러온다. 이 방식은 코드의 유지보수성을 크게 향상시키고, 팀 협업 시 스타일 시트의 의존성과 범위를 명확하게 정의하는 데 도움을 준다.

Less는 Sass와 함께 가장 널리 사용되는 CSS 전처리기 중 하나이다. 2009년에 Alexis Sellier가 Ruby on Rails 프레임워크와의 통합을 위해 개발했으며, 이후 Node.js 기반의 자바스크립트 엔진으로 재작성되어 보다 가볍고 빠른 처리가 가능해졌다.

Less의 문법은 기존 CSS 문법과 매우 유사하며, 학습 곡선이 낮은 것이 특징이다. Sass와 달리 중괄호({})와 세미콜론(;)을 사용하는 표준 CSS 문법을 그대로 따르기 때문에, 기존 CSS 파일을 .less 확장자로 변경하는 것만으로도 즉시 전처리기 파일로 사용할 수 있다. 주요 기능으로는 변수, 중첩, 믹스인, 연산, 함수 등이 있으며, 이는 Sass가 제공하는 핵심 기능과 거의 동일하다.

Less는 특히 부트스트랩 (프론트엔드 프레임워크)의 공식 스타일시트 언어로 채택되면서 널리 알려지게 되었다. 부트스트랩 3과 4는 Less로 작성되었으며, 이를 통해 테마 변수 수정과 컴포넌트 스타일 확장이 용이해졌다. 그러나 부트스트랩 5부터는 공식 CSS 전처리기가 Sass로 변경되었다.

Stylus는 Node.js 환경에서 동작하는 CSS 전처리기로, 2010년 TJ Holowaychuk에 의해 처음 공개되었다. 유연한 문법이 가장 큰 특징으로, 괄호, 세미콜론, 콜론을 모두 생략할 수 있어 코드가 매우 간결해진다. 이는 기존 CSS 문법과 완전히 호환되면서도, 선택적으로 간소화된 문법을 사용할 수 있도록 설계되었다.

주요 기능 면에서는 Sass나 Less와 유사하게 변수, 중첩, 믹스인, 함수, 조건문, 반복문 등을 지원한다. 특히 내장 함수가 풍부하고, JavaScript와의 연동이 용이하여 동적인 스타일을 생성하는 데 강점을 보인다. 예를 들어, JavaScript 라이브러리의 값을 스타일시트에서 직접 참조하거나 연산에 활용할 수 있다.

다른 전처리기와의 비교에서 Stylus는 문법의 자유도가 매우 높다는 점이 두드러진다. 다음은 간단한 문법 비교 예시이다.

그러나 이러한 높은 자유도는 프로젝트 내 코드 일관성을 유지하기 어렵게 만들 수 있으며, 특히 여러 개발자가 협업하는 환경에서는 단점으로 작용할 수 있다. 또한, 생태계와 커뮤니티의 규모가 Sass에 비해 상대적으로 작아 학습 자료나 서드파티 도구의 다양성이 부족한 편이다.

Sass 프로젝트의 구조 설계는 코드의 재사용성, 유지보수성, 확장성을 높이는 핵심 요소이다. 일반적으로 기능이나 역할에 따라 파일을 분리하고, partials를 활용하여 모듈화하는 방식을 채택한다.

기본적인 프로젝트 구조는 다음과 같은 디렉토리와 파일로 구성된다.

이러한 구조는 7-1 패턴(7개의 폴더와 1개의 메인 파일)으로 잘 알려져 있으며, 프로젝트 규모와 요구사항에 따라 디렉토리를 추가하거나 통합하여 유연하게 적용할 수 있다. 설계의 핵심은 스타일시트를 논리적으로 분리함으로써 특정 스타일을 찾고 수정하기 쉽게 하며, 팀 협업 시 충돌을 최소화하는 데 있다.

Sass와 같은 CSS Pre-processor를 실무에서 효율적으로 사용하려면 자동화 빌드 도구와의 연동이 필수적이다. 개발 과정에서 Sass 파일(.scss 또는 .sass)을 작성하면, 빌드 도구가 이를 표준 CSS 파일로 변환(컴파일)하고, 추가적인 최적화 작업을 수행한다. 이러한 자동화는 개발 생산성을 크게 향상시키며, 최종 산출물의 품질을 보장한다.

주요 빌드 도구와의 연동 방법은 다음과 같다.

일반적인 워크플로우는 소스 코드 변경을 감지(watch)하여 자동으로 컴파일을 수행하고, 필요에 따라 CSS 최소화나 Autoprefixer를 통한 벤더 프리픽스 자동 추가 등의 후처리 과정을 포함한다. 예를 들어, Webpack 개발 서버와 연동하면 실시간으로 변경 사항을 브라우저에 반영하는 핫 리로딩이 가능해진다. 또한, PostCSS와 함께 사용하는 경우가 많아, Sass 컴파일 후 PostCSS 플러그인을 통해 더욱 정교한 변환과 최적화를 진행한다.