[CSS][Sass] Sass & SCSS에 대해서

Sass

Sass(Syntactically Awesome Style Sheets)는 CSS를 좀 더 쉽게 다루기 위해 개발된 전처리기(preprocessor) 입니다.

 

CSS는 단순하지만, 프로젝트의 규모가 커질 수록 쓰기 불편한 점이 많았습니다.

 

특정 색상이나 선택자가 반복해서 나타나거나, 조건문 또는 반복문 등의 흐름제어가 불가능 한 것, 그리고 변수를 지원하지 않는 것 등이 그 예입니다.

 

Sass는 이런 문제점들을 보완하고자 기존 CSS에 추가적인 문법을 추가하였습니다.

$main-color: #3498db

body
  color: $main-color
  background: white

Sass는 빌드할 때 CSS로 변환되기 때문에, 기존에 존재하던 CSS 파일도 확장자만 바꾸면 Sass 파일로서 사용할 수 있습니다.

SCSS

SCSS(Sassy CSS)는 Sass를 적용한 CSS 문법으로, CSS에서 원래 사용하던 중괄호를 사용하여 Sass의 문법을 좀 더 CSS 친화적으로 바꾼 형식입니다.

$main-color: #3498db;

body {
  color: $main-color;
  background: white;
}

즉, Sass와 기능상으로는 완벽히 같으면서도 CSS처럼 사용할 수 있습니다.

 

현재는 Sass보다 SCSS가 표준으로 사용되고 있다고 합니다.

	Sass	SCSS
확장자	.sass	.scss
문법 구조	들여쓰기 기반 세미콜론(;) 없음	CSS 스타일 따라감 중괄호 사용
채용률	낮음	높음

 

몇 가지 Sass의 추가 기능

※ 아래 코드는 모두 SCSS를 기준으로 작성되었습니다.

1. 변수 (Variables)

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

2. 중첩 (Nesting)

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

  li { display: inline-block; }

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

3. 믹스인 (Mixins)

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

4.모듈 (Built-In Modules)

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

 

Sass에 대한 자세한 문법은 아래 공식 문서에서 확인할 수 있습니다.

https://sass-lang.com/documentation/

Sass: Documentation