2021-05-07 :: SCSS official guide 번역

sass-lang.com/guide

Sass: Sass Basics

전처리

 css가 점점 커지고 복잡해 짐에 따라 관리가 힘들어졌다. 따라서 전처리기의 도움이 필요하다. Sass는 기존의 css에 없었던 변수, nesting, mixin, inheritance 처럼 유용한 기능들을 재공하여 css를 다시 재밌게 만들어 준다.

 

Sass를 적용하고 나면 Sass파일을 전처리 과정을 거쳐 일반적인 css 파일로 바꾸어 준다.

 

Sass는 간단히 터미널을 통해 설치된다. Sass가 설치되면, sass 명령어를 통해 Sass파일을 css파일로 컴파일할 수 있다. 

또한 --watch flag를 추가하면 이 플래그가 당신의 파일을 지켜보며 변화가 발생할 때마다 css로 다시 컴파일 해 줄것이다.

sass --watch input.scss output.css

변수 variables

스타일시트에 필요한 정보를 재사용할 수 있는 변수가 있다고 상상해 보자. 당신은 색이나 폰트와 같은 어떤 css값도 필요에 따라 재사용할 수 있다. Sass에서 $기호를 통해 변수를 만들 수 있다. 

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

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

Sass가 작동하면 $기호를 통해 정의된 변수가 css파일로 변환된다. 변수는 브랜드 컬러와 같이 일관된 css값을 사이트 전체에서 사용할 때 특히 유용하다.

중첩 nesting

HTML 파일을 보면 중첩과 계층을 분명히 확인할 수 있다. 그러나 css는 그러한 계층을 가지고 있지 않다.

Sass는 css selector를 HTML의 계층구조와 비슷한 형태로 사용할 수 있게 해준다. 다만 과하게 중첩된 설계는 파일을 더욱 관리하게 어렵게 하니 주의하자.

이를 명심하고 아래 navigation을 계층구조에 맞추어 표현한 예시를 보자.

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

  li { display: inline-block; }

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

코드를 보면 ul, li, a 테그가 nav selector 안에 중첩된 것을 확인할 수 있다. 이렇게 css파일을 구성하면 코드의 가독성이 높아진다.

모듈 Modules

Sass의 모듈 기능 덕분에 하나의 파일에 모든 sass코드를 담을 필요가 없어졌다. @use를 이용하면 당신이 원하는 만큼 코드를 나누어 관리할 수 있다. 이 기능은 다른 Sass파일을 모듈로 불러와 그 안의 변수, 믹스인, 함수등을 사용할 수 있음을 의미한다.

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

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

// styles.scss
@use 'base';

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

믹스인 Mixins

가끔 CSS작업을 할 때 비슷한 값들을 반복적으로 입력할 때가 있다. mixin은 css값들을 그룹으로 모아 재사용할 수 있도록 한다. 심지어 변수를 mixin에 전달하여 더욱 유연하게 스타일을 적용할 수 있다. 

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

mixin을 만들기 위해서는 @mixin을 이용해 바로 이름을 부여할 수 있다. 우리는 위 예시 코드에서 transform이라는 이름을 가진 mixin을 만들었다. 또한 우리는 $property 괄호 안에 넣어 인자로 전달했다. 믹스인을 생성한 하고 '@include 믹스인 이름'과 같은 방식으로 믹스인을 사용할 수 있다. 

확장/상속 Extend/Inheritance

확장과 상속은 Sass의 가장 강력한 기능 중 하나이다. @extend를 사용하면 css값들을 여러 selector에 공유할 수 있다. 

placeholder 클래스는 extend 되었을 때만 출력되는 특수한 클래스이다.

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

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

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

위 코드를 살펴보면 .message .success .error .warning은 모두 %message-shared처럼 나타나는 것을 알 수 있다.

equal-heights와 같이 사용되지 않은 placeholder는 생성되지 않는다.

 

@mixin @include와 %placeholder @extend는 거의 비슷한 기능을 하는 것으로 보인다.

 

부모 선택자 Parent Selector

부모 선택자 &는 중첩된 selector에서 외부 selector를 지정하기 위해 만들어졌다.