[css] Sass

Preprocessing

CSS는 스타일시트가 점점 더 커지고 복잡해짐에 따라 유지 관리가 어려워진다는 단점이 있습니다. Sass는 Nesting, Mixin, inheritance 및 강력하고 유지 관리가 가능한 CSS를 작성하는 데 도움이 되는 유용한 기능들을 가지고 있습니다.

Sass를 시작하면 사전 처리된 Sass 파일을 가져와 웹 사이트에서 사용할 수 있는 일반 CSS 파일로 저장됩니다.

이를 실현하는 가장 직접적인 방법은 터미널에 있습니다. Sass가 설치되면 sass 커맨드를 사용하여 Sass를 CSS에 컴파일할 수 있습니다. 이를 위해서는 Sass에게 빌드할 파일과 CSS를 출력할 위치를 지정해 주어야 합니다. 예를 들어 터미널에서 sass input.scss와 output.css를 실행하면 단일 sass 파일인 input.scss가 발생하고 해당 파일이 output.css로 컴파일됩니다.

--watch 플래그를 사용하여 개별 파일 또는 디렉터리를 볼 수도 있습니다. watch 플래그는 Sass가 원본 파일의 변경 내용을 확인하고 Sass를 저장할 때마다 CSS를 다시 컴파일하도록 알려줍니다. input.css 파일을 보고 싶다면 수동으로 파일을 빌드하는 대신 다음과 같이 command에 watch 플래그를 추가하면 됩니다.

sass --watch input.scss output.css

폴더 경로를 입력 및 출력으로 사용하고 콜론으로 구분함으로써 디렉터리를 감시 및 출력할 수 있습니다.

sass --watch app/sass:public/stylesheets

Variables

변수를 스타일시트 전체에서 재사용하고자 하는 정보를 저장하는 방법이라고 생각할 때 색상, 글꼴 스택 또는 재사용하고자 하는 모든 CSS 값을 저장할 수 있습니다. sass는 무언가를 변수로 만들기 위해 다음과 같이 $ symbol을 사용합니다.

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

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

위 코드의 css 코드는 다음과 같습니다.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Sass가 처리되면 $font-stack 및 $primary-color에 대해 정의한 변수가 사용되며 CSS에 변수 값이 배치되고 출력하게 됩니니다. 이는 브랜드 색상으로 작업하고 사이트 전체에서 일관성을 유지할 때 매우 유용하게 사용됩니다.

Nesting

HTML과 비교하여 CSS는 명확하게 중첩된 시각적 계층 구조를 나타내지 못합니다. Sass를 사용하면 CSS selector를 HTML의 동일한 시각적 계층을 따르는 방식으로 중첩시킬 수 있습니다. 다만 지나치게 중첩된 규칙은 유지하기가 어렵고 일반적으로 잘못된 방법으로 간주될 수 있습니다.

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

  li { display: inline-block; }

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

위 코드의 css 코드는 다음과 같습니다.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

ul, li 및 selector가 nav selector 내부에 중첩되어 있는 것을 볼 수 있습니다. 이것은 CSS를 구성하고 가독성을 높일 수 있는 좋은 방법입니다.

Modules

한 파일에 모든 Sass를 쓸 필요는 없습니다. @use 규칙을 사용하여 원하는 대로 파일을 분할할 수 있습니다. 이 규칙은 또 다른 Sass 파일을 모듈로 로드합니다. 즉, 파일 이름을 기반으로 네임스페이스를 사용하여 Sass 파일의 variable, mixin 등의 기능을 참조할 수 있습니다. 파일을 사용하면 컴파일된 출력으로부터 생성되는 CSS도 사용 가능합니다.

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

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

@use를 이용해서 base.scss 파일을 styles.scss로 가져 왔습니다.

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many Vendor Prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for theme.

CSS, CSS3에는 Vendor Prefixes가 많이 있으므로 쓰기에는 다소 지루할 수 있습니다. mixin을 사용하면 사이트 전체에서 재사용할 CSS 선언 그룹을 만들 수 있습니다. 또한 값을 전달하여 mixin을 보다 유연하게 만들 수 있습니다. mixin은 vendor prefixes를 사용할 때 특히 유용하게 쓰입니다.

> 
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

mixin을 생성하려면 @mixin 지시문을 사용하고 이름을 지정합니다. 위의 코드에서는 mixin의 이름을 theme로 정하였습니다. $theme을 괄호 안에 넣음으로써 원하는 모든 항목을 전달할 수 있습니다.

mixin을 생성한 후에는, @include + [mixin 이름]으로 CSS 선언을 할 수 있습니다.

Extend/Inheritance

Sass의 가장 유용한 기능 중 하나입니다. @extend를 사용하면 한 selector에서 다른 selector로 CSS 속성을 공유할 수 있습니다.
placeholder class는 extend될 때만 인쇄되는 특수한 클래스 유형으로 컴파일된 CSS를 깔끔하고 깨끗하게 유지하는 데 도움이 됩니다.

/* This CSS will print because %message-shared is extended. */

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

위의 코드는 .message, .success, .error 및 .warning을 %message-shared와 동일하게 동작하도록 합니다. 즉, %message-shared가 나타나는 모든 위치에 .message, .success, .error, .warning이 표시됩니다. 이는 생성된 CSS에서 발생하며, 여기서 각 클래스는 %message-shared와 동일한 CSS 속성을 얻습니다. 이렇게 하면 HTML 요소에 여러 클래스 이름을 쓸 필요가 없습니다.

placeholder를 사용하는 것이 styels의 다른 곳에 중첩된 클래스를 확장하지 않도록 하는 가장 쉬운 방법인데, 이로 인해 CSS에서 의도하지 않은 선택기가 발생할 수 있습니다.

Operators

Sass에는 +, -, *, / 및 %와 같은 소수의 표준 산술 연산자가 있습니다.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

CSS에서 위와 같이 나타난 코드를 SASS에서는 다음과 같은 수학식을 이용해서 나타낼 수 있습니다.

SCSS SYNTAX
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sass를 통해 픽셀 값을 가져와서 큰 번거로움 없이 백분율로 변환할 수 있습니다.