Sass

1. 개요
1.1. SCSS
2. 개발 환경
3. 기능
4. 참조

공식 홈페이지

Syntactically Awesome StyleSheets

1. 개요

CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 프로그래밍 언어다. SASS에는 Sass와 SCSS가 있다.

또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.

비슷한 CSS 전처리기 언어로는 LESS, Stylus 등이 있다.

이 형식을 사용한 파일의 확장자는 .sass, .scss이다. Sass는 SCSS에서 중괄호를 없애서 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 뜰 확률이 꽤 크다. 따라서 일반적인 교육 사이트에서는 SCSS를 기준으로 설명한다.

1.1. SCSS

Sassy CSS

말그대로 Sass한 CSS라는 뜻이다. 실제 뜻을 생각해보면 CSS한 Sass가 더 맞는 것 같다.

가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 중괄호를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다.

단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. 따라서 대부분의 사용자들이 SCSS 문법을 사용하여 Sass의 공식 문법으로 사용되고 있다.

2. 개발 환경

여러 편집기와 여기에 명시된 컴파일러를 통해 사용이 가능하다. 본래 컴파일러가 Ruby로 되어 있어서 Ruby 인터프리터도 설치해야 했지만, C++로 제작된 libsass 컴파일러가 나오면서 이쪽이 더 많이 사용되고 있다. npm에서도 libsass 컴파일러를 패키지 형태로 설치할 수 있어서 CUI 환경에서는 이 방법이 가장 많이 사용된다.

그 외에도 비주얼 스튜디오 코드에서 Live Sass Compiler라는 확장 기능을 사용하여 편집기에서 편집하고 저장만 하면 자동으로 CSS로 컴파일해주는 기능도 있다.

React에서는 터미널에서 프로젝트 디렉터리로 들어가 npm install node-sass 를 입력하면 SCSS 파일을 프로젝트에서 직접 불러올 수 있게 된다.

3. 기능

  • 네스팅 - 계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능이다. 선택자에서 상위 계층을 적던 것을 정리하고 관련 요소들을 그룹으로 묶을 수 있게 되어 더욱 깔끔해진다.
CSS
#!syntax css
ul {
    list-style:none;
    width:1000px;
    margin:0 auto
    }
ul li {
    float:left;
    }
ul li a {
     color:black;
     padding:20px;
     display:block;
    }
SCSS
#!syntax css
ul {
    list-style:none;
    width:1000px;
    margin:0 auto;
    li {
        float:left;
        a {
            color:black;
            padding:20px;
            display:block;
        }
    }
}
  • 확장
  • 특수 선택자
  • SassScript
    • 변수 - $를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지 보수가 쉬워진다.
CSS
#!syntax css
.dv1 {width:1000px;margin:0 auto;border:1px solid black}
.dv2 {width:200px;border:1px solid black}
.dv3 {width:500px;float:left;border:1px solid black}
.dv4 {width:700px;position:relative;border:1px solid black}
.dv5 {width:100px;position:absolute;border:1px solid black}
SCSS
#!syntax css
$bLine:1px solid black; /* 여기만 바꾸면 5개의 클래스 값을 전부 바꿀 수 있다.  */
 
.dv1 {width:1000px;margin:0 auto;border:$bLine}
.dv2 {width:200px;border:$bLine}
.dv3 {width:500px;float:left;border:$bLine}
.dv4 {width:700px;position:relative;border:$bLine}
.dv5 {width:100px;position:absolute;border:$bLine}
  • 함수 - 동일한 기능을 가진 코드를 그룹화하여 중복을 제거하고 기능을 명시하여 유지관리에 도움을 준다.
CSS
#!syntax css
.dv1 {width:1000px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv2 {width:200px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv3 {width:500px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv4 {width:700px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv5 {width:100px;position:absolute;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
SCSS
#!syntax css
@mixin centering{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

.dv1 {width:1000px;@include centering}
.dv2 {width:200px;@include centering}
.dv3 {width:500px;@include centering}
.dv4 {width:700px;@include centering}
.dv5 {width:100px;@include centering}

  • 반복문 - 비슷한 구문의 반복 작성을 편하게 할 수 있다.
CSS
#!syntax css
div:nth-child(1) {
  top: 10px;
}
div:nth-child(2) {
  top: 20px;
}
div:nth-child(3) {
  top: 30px;
}

...

div:nth-child(60) {
  top: 600px;
}
SCSS
#!syntax css
@for $i from 1 through 60 {
    div:nth-child(#{$i}){
        top:10px * $i;
    }
}

  • 연산 - 간단한 연산을 할 수 있어서 팀프로젝트 등을 할 때 왜 이런 수치가 나왔는지 의도를 파악할 수 있도록 작성할 수 있다.
CSS
#!syntax css
.dv1 {float:left;width:101.11111px;margin-right:10px}
SCSS
#!syntax css
.dv1 {float:left;width:(1000px/9)-10px;margin-right:10px}

  • Vendor Prefix - webkit 코드를 일일이 적지 않아도 webkit에서 인식할 수 있게 해 준다.
CSS
#!syntax css
.dv1 {background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(255,245,0,.9)));
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9))}
SCSS
#!syntax css
.dv1 {background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9))}

4. 참조

SASS 공식 가이드 (영어)

W3 Schools SASS 강좌 (영어)

생활코딩 SASS 강좌 (한국어)

최종 확인 버전:

cc by-nc-sa 2.0 kr

Contents from Namu Wiki

Contact - 미러 (Namu)는 나무 위키의 표가 깨지는게 안타까워 만들어진 사이트입니다. (29.30ms)