SCSS

일종의 프로그래밍적인 기능을 지원하는 css 전처리기이다. scss 양식으로 작성하고 컴파일 기능을 제공하는 모듈을 이용해 css로 변환해준 뒤 사용되는 구조.

 

비교를 위한 기존 방식의 CSS

.my-alert {
    background: #ff0000;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}


.my-alert2 {
    background: #eeeeee;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}

div.container div{
    background: #00ff00;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}

div.container h4{
    background: #eeeeee;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}

4개의 css가 있고, 각각 같은 형식을 어느정도 가지고 있다. 이 경우 상위 tag로 공통부분을 빼거나 하는 방식으로 코드를 줄일 수 있으나 가독성이 떨어지고 숫자가 많아질수록 관리가 어려워지는 경향이 있다.(CSS고수일수록 문제는 없겠지만)

 

SCSS에서는 몇가지 방법으로 그런 부분들을 해소하고 있다.

먼저, 아래 명령어로 노드 모듈을 설치한다.

yarn add node-sass

사용자가 .scss 파일 형식으로 작성하지만 최종적으로 css로 컴파일 해줄 것이 필요하다. node-sass가 그 역할을 해준다. 그 뒤 scss를 만들어 작성하려고 하면 버젼 에러가 발생하는 경우가 있다. 4.0.0 | 5.0.0 와 호환된다는 메세지가 뜰 경우 버젼을 종속해서 설치한다.(yarn add node-sass@5.0.0)

 

.scss 에서 사용하는 몇가지 문법을 소개한다.

먼저 아래처럼 구조화 할 수 있다.

 

div.container {
	div {
      background: #00ff00;
      padding: 20px;
      border-radius: 10px;
      max-width: 500px;
      width: 300px;
      margin: auto;
    }
    h4 {
      background: #eeeeee;
      padding: 20px;
      border-radius: 10px;
      max-width: 500px;
      width: 300px;
      margin: auto;
    }
}

// 상위 치환
.fs {
	$-small {
    }
    $-medium {
    }
    $-large {
    }
}
// 위 상위치환이 컴파일 되면 아래처럼 3개의 class로 나뉘어짐
.fs-small {
}
.fs-medium {
}
.fs-large {
}

css와 크게 다른 것은 아니지만 들여쓰기와 블록 등으로 css 구조를 한결 알아보기 쉽도록 도와준다.

 

extend 해서 재사용도 가능하다.

.my-alert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}

.my-alert2 {
    @extend .my-alert;
    background: #ffe591;
}

.my-alert을 @extend 라는 기능을 통해 가져온 뒤, background만 다시 지정했다.

 

mixin해서 재사용할 수도 있다.

//mixin
@mixin 경고창() {
    background: #eeeeee;
    padding: 20px;
    border-radius: 10px;
    max-width: 500px;
    width: 300px;
    margin: auto;
}

.my-alert3 {
    @include 경고창();
    background: deeppink;
}

@mixin으로 선언하고 @incloud로 호출해서 사용한다.

 

외부 파일을 import 하거나 변수를 선언해서 사용할 수도 있다.

@import "./reset.scss";

$변수명 : 값;

.red {
    color : $변수명;
    // 문자열 중간에 변수를 넣고 싶은 경우 #{} 안에 넣는다.
    background: url("http://senfisneif#{main-color}");
}

$변수명 으로 선언하고 $변수명으로 사용한다. 변수는 재할당이 가능하다.

 

if도 가능하다.

.my-alert2 {
    @extend .my-alert;
    background: #ffe591;
    @if (4px > 5px) {
        color: #61dafb;
    } @else {
        color: #eeeeee;
    }
    // 아래같은 조건문도 가능하다. if(조건, 참일때, 거짓일때)
    color : if(3 > 4, red, null);
}

 

그 외에도 반복문 등 여러 문법을 지원한다. 하나부터 열까지 너무나 잘 소개되어 있는 블로그 주소를 글 하단에 링크하니 참조바란다.

 

 

 

scss에 대해 자세히 소개된 블로그 링크 : https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!