SASS/SCSS 기초 문법 총정리

 SASS란?

CSS를 프로그래밍 언어스럽게 작성가능한 Preprocessor로 CSS에서 변수, 연산자, 함수, extend, import 등을 사용가능하게끔 해준다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성한 파일을 다시 CSS로 컴파일해야하는데 node-sass를 설치하면 알아서 해준다.

 

 node-sass 설치

설치는 npm install node-sass 또는 yarn이 있을 때 yarn add node-sass을 터미널에 치면된다. 그리고 SASS문법을 쓰고싶다면 .CSS 파일이 아닌 .SCSS로 만들면 된다. 그리고 import './파일명.scss'으로 불러온다.

 

 SASS 문법

1. 변수에 데이터를 저장

$변수명 : 변수에 넣을 값

Detail.scss

$메인칼라 : #ff0000;

.red{
    color : $메인칼라;
}

 

2. @import 파일 경로

사실 CSS문법이지만 SASS에서도 많이 사용한다.

CSS 파일 간 import를 하는 문법이다.

reset.scss

body {
    margin : 0;
}
div {
    box-sizing: border-box;
}

Detail.scss

@import './reset.scss';

 

3. nesting

셀렉터 대신 쓴다. 아래의 예시를 보면 div.container 안에 있는 UI들이라는 것을 쉽게 파악할 수 있다.

Detail.scss

// div.container h4 {
//     color : blue;
// }

// div.container p {
//     color : green;
// }

div.container {
    h4 {
        color: blue;
    }
    p {
        color : green;
    }
}

 

4. @extend

비슷한 코드는 그대로 복붙하지 않고 @extend를 해온다.

Detail.scss

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

.my-alert-pink {
    @extend .my-alert;
    background: pink;
}

 

5. @mixin / @include

@mixin은 긴 코드를 축약하기 위해 함수를 만드는 것이다.

(자바스크립트와 다르게 함수명이 위에 선언되어있어야 밑에서 사용가능)

@include는 함수를 가져다쓰기 위해서 쓰는 문법이다.

Detail.scss

@mixin 함수() {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

.my-alert {
    @include 함수()
}

 

 

 오류

위와 같이 Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.이 뜬다면 아래와 같이 해결 가능하다.

$ npm uninstall node-sass

$ npm install node-sass@4.14.1

$ yarn start

차례대로 터미널에 쳐주면 해결된다.

 

 마치면서

CSS를 작성할 때 SASS를 사용하면 코드의 양이 준다.

그리고 함수에 파라미터를 넣거나 반복문도 사용할 수 있고 여러가지 기능이 많다.

즉, SASS 문법을 사용하면 쉽고 짧게 CSS를 작성할 수 있으며

작성 뒤 node-sass라는 라이브러리를 통해 CSS로 컴파일해서 사용하면 된다.