CSS Preprocessor : SCSS

css 전처리기에는 scss, less, stylus 등 많은 종류가 존재한다.여기서 sass와 scss 사이의 관계가 궁금해지는데 (나도 많이 헷갈렸다 하도 혼용을 해서)  알고보니 scss는 sass를 위한 공식적인 syntax다 그러니까 사실상 sass를 쓴다는 건 scss를 쓴다는 것과 거의 동의어라고 생각하면 된다.

 

당연히 gulp나 webpack과 같은 도구를 통해 일반적인 css로 트랜스파일해주는 과정이 필요하다. gulp나 webpack에 대해서는 다른 섹션에서 다룬 바 있으므로 생략하고 SCSS에 대해서만 다뤄보자.

 

변수

 

SCSS에서는 변수를 설정할 수 있다. 디자이너와 작업할 때 키 컬러나 서브 컬러 등 다양한 정해진 컬러를 써야할텐데 이 값을 변수처럼 관리할 수 있게 된다.

 

변수 파일을 만들어 보자. 여기서 _를 붙여주는 이유는 css로 트랜스파일하지 말라는 의미이다. 변수 설정한 SCSS파일이 아니라 해당 변수를 적용받은 스타일시트만 css 변환을 하면 되기 때문이다.

 

 

_variables.scss에 $를 붙여 변수 설정. 그림자, 폰트 크기, 색 등 css로 가능한 것은 모두 변수 설정이 가능하다.

$bg: crimson;
$size: 30px;

 

@import한 뒤 해당 변수를 사용 가능

@import "_variables";

body {
  background-color: $bg;
}

 

 

 

nested css

다음과 같은 html 구조가 있다면

<div class="box">
  <h1>test</h1>
  <div>hello</div>
  <button>button!</button>
</div>

 

아래와 같이 nested css를 할 수 있다.

.box {
  h1 {
    font-size: $size;
  }

  button {
    color: blue;
  }

  &:hover {
    background-color: lightcoral;
  }
}

 

 

mixin

 

_mixins와 같이 언더바를 붙인 mixin을 관리하는 파일 하나를 만든 후 다음과 작이 작성하고

import한 뒤 @include를 통해 사용합니다.

 

@mixin sexyTitle {
    color: lightblue;
    font-size: 30px;
    margin-bottom: 20px;
}

@import "_mixins";


.box {
  h1 {
    @include sexyTitle
  }
}

 

mixin에 변수를 넣어서 활용할 수도 있습니다.

 

@mixin link($color) {
    text-decoration: none;
    display: block;
    color: $color;
}

a {
  &:nth-child(odd) {
    @include link(blue)
  }
}

 

심지어 if/else문을 사용할수도 있습니다.

@mixin link($word) {
    text-decoration: none;
    display: block;
    color: $color;

    @if $word=="odd" {
        color: blue;
    }

    @else {
        color: red;

    }
}

 

 

extends

 

%를 사용해 중복적으로 적용할 블록을 만들고 @extend를 통해 사용할 수 있습니다. 사용 후 고유

%extensionNumberOne {
  border-radius: 7px;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 10px;
  background-color: lightsalmon
}

a {
  @extend %extensionNumberOne;
  text-decoration: none;
}

button {
  @extend %extensionNumberOne
}