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

ul {
    list-style:none;
    width:1000px;
    margin:0 auto
    }
ul li {
    float:left;
    }
ul li a {
     color:black;
     padding:20px;
     display:block;
    }

SCSS

ul {
    list-style:none;
    width:1000px;
    margin:0 auto;
    li {
        float:left;
        a {
            color:black;
            padding:20px;
            display:block;
        }
    }
}

확장
특수 선택자
SassScript
- 변수 - $를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지 보수가 쉬워진다.

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

$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

.dv1 {float:left;width:101.11111px;margin-right:10px}

SCSS

.dv1 {float:left;width:(1000px/9)-10px;margin-right:10px}

함수 - 동일한 기능을 가진 코드를 그룹화하여 중복을 제거하거나 기능을 명시하여 유지관리에 도움을 준다.

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

@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

.dv1 {width:225px}
.dv2 {width:525px}
.dv3 {width:150px}

SCSS

@function width-cal($a, $b){
  @return $a * $b;
}

.dv1 {width:width-cal(900px, 3/12)}
.dv2 {width:width-cal(900px, 7/12)}
.dv3 {width:width-cal(900px, 2/12)}

반복문 - 비슷한 구문의 반복 작성을 편하게 할 수 있다.

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

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

조건문 - 조건에 따라 속성의 값을 다르게 할 수 있다.

CSS

.container *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
}

.container *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: 1/2;
}

.container *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: 1/3;
}

.container *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: 1/4;
}

.container *:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: 2/1;
}

...

.container *:nth-child(60) {
  -ms-grid-row: 15;
  -ms-grid-column: 4;
  grid-area: 15/4;
}

SCSS

.container{
    *{
      @for $i from 1 through 60 { 
        &:nth-child(#{$i}){ /* #{}는 숫자를 문자로 변환해준다. 또한 &는 부모를 선택하게 하는 선택자이다. */
          @if ($i%4 == 0) {
            grid-area:#{floor($i/4+0.9)}/4
          }
          @else {
            grid-area:#{floor($i/4+0.9)}/#{$i%4}
          }
        }
      }
    }
  }

Vendor Prefix - webkit 코드나 ms 코드를 일일이 적지 않아도 webkit이나 IE 등에서 인식할 수 있게 해 준다.

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));
  display: -ms-grid;
  display: grid;
  }

SCSS

.dv1 {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9));
  display: grid;
  }

4. 참조[편집]

SASS 공식 가이드 (영어)
W3 Schools SASS 강좌 (영어)
생활코딩 SASS 강좌 (한국어)