SASS 사용법

📒 SASS

✔ 왜? (사용 이유)

◼ CSS 대용 언어로, CSS의 반복 코드 문제 등을 해결하기 위해서 탄생했다.

◼ CSS에 추가적인 문법(조건문, 반복문, 변수, 함수)을 제공한다. 즉, 프로그래밍스럽게 코드를 짤 수 있게 도와준다.

 

✔ SASS 사용하기

◼ Live Sass Compiler를 설치한다.

◼ main.scss 파일을 생성해서 개발한다.

◼ 웹브라우저는 .css 파일만 읽을 수 있고, .scss를 읽을 수 없다. 따라서, scss 파일을 css 파일로 변환해서 사용해야 한다.

◼ Live Sass Compiler가 설치되어 있으면 VS Code 하단의 Watch Sass를 클릭하면 동일 폴더에 .main.css 파일이 생성된다.

◼ Html 파일에 .main.css 파일을 첨부해서 사용한다.

◼ .main.css.map 파일은 크롬 개발자 도구의 Styles 부분의 파일명을 scss 파일로 표시해준다.

 

✔ SASS 용도

$main_color: #2a4cb2;

.background {
  background-color: $main_color;
}

.background2 {
  background-color: $main_color;
}

.title {
  font-size: $main_font_size + 2px;
}

◼ 반복적으로 사용해야 할 때, 변수 문법을 사용할 수 있다.

◼ $ 기호를 사용하면 변수를 생성할 수 있다. 또한 사용할 때도 ${변수명}으로 사용한다.

◼ 사칙연산을 사용해서 값을 변경할 수 있다.

 

✔ .scss / .sass 파일의 차이

.sass 파일은 indent로 코드 작성이 가능하다.

.background
    color : red

.scss 파일은 괄호로 코드를 작성한다.

.background {
  background-color: red;
}

 

✔ 문법

// css
.main-bg h4 {
  font-size: 14px;
}

// scss
.main-bg {
  h4 {
    font-size: 14px;
  }
}

◼ 위 코드 2개는 같은 기능을 제공한다.

◼ nesting 문법을 사용할 수 있다.

 

// css
.btn-green {
  width: 100px;
  height: 100px;
  padding: 20px;
  color: green;
}

.btn-red {
  width: 100px;
  height: 100px;
  padding: 20px;
  color: red;
}

.btn-blue {
  width: 100px;
  height: 100px;
  padding: 20px;
  color: blue;
}

◼ 빨간, 파란, 초록 버튼이 필요하면, 각각을 코드로 작성해야 했다.

// scss
.btn-green {
  @extend %btn;
  color: green;
}

.btn-red {
  @extend %btn;
  color: red;
}

.btn-blue {
  @extend %btn;
  color: blue;
}

%btn {
  width: 100px;
  height: 100px;
  padding: 20px;
}

◼ @extend 문법

◼ 공통으로 사용되는 style을 % 기호를 사용하여 임시 Class로 만들고, @extend %{클래스명}을 활용하여 중복 style을 쉽게 사용할 수 있다.

◼ %기호 대신 .을 사용해도 정상적으로 동작하지만, % 기호를 사용해야, 단독으로 컴파일 되지 않는다.

 

@mixin btn_style($padding_size, $option, $color) {
  width: 100px;
  height: 100px;
  padding: $padding_size;
  #{$option}: $color;
}

.btn-green2 {
  @include btn_style(20px, color, green);
}

.btn-red2 {
  @include btn_style(10px, color, red);
}

.btn-blue2 {
  @include btn_style(15px, color, blue);
}

◼ @mixin 문법

◼ 공통으로 사용되는 것을 @mixin으로 정의하고 @include를 사용해서 넣을 수 있다.

◼ $파리미터를 사용하면, 값을 가변적으로 설정할 수 있다.

◼ 글자 중간에 $변수나 $파라미터를 넣을 때는 #{$변수명}을 사용한다.

 

// main.scss
@use "main2.sass";
.background {
  background-color: main2.$main2_color;
}

// main2.sass
body
    margin: 0

div
    box-sizing: border-box
    
$main2_color: white

◼ @use 문법

◼ 다른 파일의 내용을 가져오고 싶을 때 사용한다.

◼ main2.sass를 단독으로 컴파일하기 싫을 경우, _main2.sass로 파일명을 변경하면 컴파일 되지 않는다.

◼ main2 내의 변수를 사용하고 싶으면, main2.${변수명}으로 사용할 수 있다.