CSS를 좀 더 멋지게 해주는 SCSS에 대해 알아보자

CSS Preprocessor

CSS Preprocessor(CSS 전처리기)는 CSS가 동작하기 전에 특정 문법을 가지고 CSS를 생성하는 프로그램이다
대표적으로 Less, Sass(Scss), Stylus가 있으며 CSS보다 편리한 기능과 유지보수성을 지닌 문법을 제공한다

어떻게 사용할까?

CSS Preprocessor(CSS 전처리기)를 사용하려면 다음과 같은 과정을 거쳐야 한다
전처리기로 문서 작성 -> 컴파일 -> CSS

위와 같은 과정을 거치기 위해선 보통 컴파일러가 필요하다
컴파일러의 종류는 다양하지만 필자는 공부하면서 gulp라는 컴파일러를 사용하였다 (gulp는 나중에 정리하도록 하겠다)

SASS? SCSS?

SASS(Syntactically Awesome StyleSheets)는 말 그대로 짱 멋진 CSS를 말하며 SASS의 문법은 파이썬과 비슷하게 {} ;등을 사용하지 않는다

SCSS는 SASS와 같은 기능을 제공하지만 문법적으로 약간의 차이가 있다
SCSS는 CSS와 유사한 문법을 사용하기 때문에 CSS문법에 익숙한 개발자에게 접근성이 좋고 CSS와 코드통합에도 장점이 있다

이후 내용은 SCSS를 기준으로 적은 내용이다!

Variables

Variables는 보통 사이트에서 가장 중요한 컬러나 스타일을 저장할 때 사용한다
사용하기 위해서는 일단 SCSS폴더에서 _이름.scss의 파일을 만들어야 한다 (보통 _variables.scss로 만든다)
여기서 중요한 규칙은 이름앞에 _를 붙이는 것인데 _를 붙이게 되면 해당 파일은 css로 변하지 않는다

variables을 사용하려면 앞에 $를 붙이면 된다

// _variables.scss
$my-color = red;

// styles.scss
body {
	background-color: $my-color;
}

위와 같이 scss파일을 작성하면 컴파일 후

body {
 background-color: red;
}

위와 같이 해당 값이 적용된다

Nesting

Nesting은 블록 안에 블록을 포함 시킬 수 있는 기능이다

css와 비교를 통해 알아보자

/* css */
.box {
  width: 100px;  
}
.box h1 {
  color: tomato;
}
.box h2 {
  color: teal;
}

// scss
.box {
  width: 100px;
  h1 {
    color: tomato;
  }
  h2 {
    color: teal;
  }
}

위와 같이 자식 요소를 안에 넣어 사용 할 수 있다
또한 많은 요소들이 Nesting이 가능하다

.box {
  width: 100px;
  &:hover {
    background-color: black; // 가상 클래스도 nesting!
  }
  h1 {
    color: tomato;
    &:hover {
      background-color: black; // nesting한 h1에 hover를 다시 nesting!
  }
  }
  h2 {
    color: teal;
  }
}

위와 같이 가상 클래스도 가능하며 중복해서 nesting하는 것도 가능하다

Mixin

mixin은 코드를 재활용 할 수 있는 기능을 제공한다 (함수와 유사하다)
mixin을 사용하기 위해서는 해당 코드를 함수처럼 블록으로 묶어야 하며 앞에 @mixin 키워드를 붙여야 한다
mixin은 그 외에도 함수처럼 인자를 받고, 안에서 조건문을 통해 값을 정하는등 다양한 기능을 사용할 수 있다

// _mixins.scss
@mixin basic-title($color) {
  color: $color;
  background-color: black;
}
@mixin basic-font($size) {
  @if $size == 'big' {
    font-size: 20px;
  } 
  else {
    font-size: 10px;
  }    
}

// styles.scss
@import "_mixins.scss";

.main-title {
  @include basic-title(red);
  @include basic-font('big');
}
.sub-title {
  @include basic-title(blue);
  @include basic-font('small');
}

Extend

같은 코드를 확장하거나 중복하고 싶지 않을 때 사용하며 앞에 %를 붙인다

// _title.scss
%title {
  font-weight: bold;
  font-size: 30px;
  color: tomato;
  border: 1px solid black;
  border-radius: 5px;
}

// styles.scss
@import "_title";

.main-title {
  @extend %title;
  background-color: white;
}
.sub-title {
  @extend %title;
  background-color: gray;
}

위와 같이 코드 중복을 피할 때 사용하며 확장이 필요할 때도 사용된다
페이지에 분리해야하는 요소들이 많을 때 굉장히 유용하다고 한다

끝~