Sass(Syntactically Awesome Stylesheets)

Sass는 CSS의 상위에 있는 메타 언어로 CSS의 전처리기(pre-processor)이다. Sass를 그대로 사용하는 것이 아니라 Sass 문법으로 작성된 코드를 CSS 코드로 변환해 준다.

Sass에는 sass문법과 scss문법이 있는데 scss문법이 css의 문법과 동일한 방식으로 진행되기 때문에 권장되고 있다.(아래 예제들은 모두 scss문법을 따르고 있다.)

CSS는 쉽게 작성할 수 있지만 변수나 함수가 없어 코드를 재활용할 수 없기 때문에 점점 커지고 복잡해질 수록 유지보수하기가 어려워진다. Sass는 변수나 함수를 사용하여 CSS의 반복되는 부분을 줄여 더 빠르고 효율적으로 코드를 작성하고 쉽게 유지보수 할 수 있도록 만들어준다. 기본 적인 문법에 대해서는 아래에 설명을 하겠지만 일단 예를 들면서 좀 더 말해보면

아래와 같은 CSS가 있을 때

div {

background-color: red;

}

div p {

color: blue;

}

아래와 같이 Sass를 만들어주면 된다.

div {

background-color: red;

p {

color: blue;

}

}

이렇게 작성했을 때 html의 태그와 마찬가지로 계층을 이루도록 작성할 수 있어 이해하기가 쉽고 관리하기도 쉬워진다.

 * 단 다섯 단계 이상으로 들어가면 이해하기 어려워지고 관리하기 어려워지니 너무 깊이 들어가는 것은 지양해야한다.

이제 Sass의 문법을 보자
(아래 예제들은 모두 scss문법만 작성되어 있다. 직접 해보면서 눈으로 봐야 이해하기 쉽기 때문에 Sass만 작성해 놨으니 css로 변환된 상태는 직접 확인해보자. 간단하게 각 문법의 예제가 어떻게 돌아가는 지 보고 싶다면 글 하단에 URL이 있으니 해당 URL을 통해서 보면 된다.)

 * $는 변수를 만들고자할 때 사용된다.

$color: red;   // color라는 변수에 red 값을 넣는 것이다.

 * 변수에 !global을 작성하면 로컬 변수를 글로벌 변수로 바꿔주고 !default를 쓰면 같은 변수가 있을 때 무시하게 된다.

$size: 1px;

p {

  $size: 2px !default; // 무시가 된다.

  font-size: $size;  // 1px이다.

}

$size: 1px;

p {

  $size: 2px !global;  // 글로벌 변수가 된다.

  font-size: $val;  // 2px이다

}

p { 

  font-size: $val; // 2px이다

}

 * 사스에는 일곱 가지 데이터 유형이 있다.

 1. 숫자 => $numValue: 1

 2. 불린 => $boolValue: true

 3. 문자 => $strValue: str  // ""를 사용하면 ""까지 문자로 인식하고 "a"" 와 같은 형식은 에러가 난다.( ' 도 동일하게 동작한다.)

 4. 컬러 => $colorValue: #000000

 5. null  => $nulValue: null // 변수에 넣어 사용했을 때 css에서는 무시된다.

 6. 리스트 => (value, value, value, .....)

 7. 맵    => (key: value, key: value, .....)

 * 사스에는 +, -, *, /, % 연산자가 있다.

 * 비교 연산자는 >=, >, <, <=을 사용할 수 있다.

 * 논리 연산자는 and, or, not을 사용할 수 있다.

 * 숫자의 경우 +는 숫자를 더하는 방식이고 문자열의 경우 연결되는 방식으로 연산이 된다.

$re: re;

$d: d;

$re$d  는 re d 가 되고

$re+$d 는 red 가 된다.

$one: 1;

$two: 2;

$one$two  는 1 2 가 되고

$one+$two 는 3 가 된다.

 * &는 하나 이상의 태그 안에서만 사용할 수 있으며 띄어쓰기할 때 유의해야한다.

div {

  font: red;

  &.p {

    font-size: 21;

  }

}

 * #{...} : 변수와 다른 내용을 연결하여 사용하고자할 때 사용된다.

$attr: background;

#{$attr}-color: blue;

 * @at-root : 어디에 있던지 부모 태그에 영향을 받지 않는다.

p {

  font: red;

  @at-root div {

    font: blue;

  }

}

 * @extend : 다른 선택자의 내용을 똑같이 사용하며 인자를 받지 않는다. (css로 변환했을 때 ,를 통해서 확장된다.)

.p {

  font-size: 1;

}

p { 

  @extend .p;

  font: red;

}

 * @import : 파일을 가져와 사용한다.

@import "파일명";

 * @mixin : @include를 통해서 @mixin에 만들어져 있는 내용을 사용할 수 있고, @extends와 다르게 인자를 받을 수 있다.

@mixin a($val : 1){font: #{$val}px;}

.foo {

  @include a();

  background-color: orange;

  .nested-foo {

    width: 25%;

  }

}

 * @funcion : 함수 안에서 계산하고 계산된 내용을 @return을 통해 반환된다.

@function a($val){

  @return $val + 1;

}

p{

  font: #{a(1)}px;

}

 * @if @else : if문 이다.

@function a($b: true) {

  @if $b {

    @return blue;

  }

  @else {

    @return red;

  }

}

p {

  background-color: a(false);

}

 * @for 변수 from 시작 through(to) 끝 : for문 으로 through는 끝 숫자를 포함하고 to는 포함하지 않는다.

@for $a from 1 through 3 {

  .p-#{$a} {

    background-color: red;

  }

}

 * @while 조건문 : 조건문이 참일 때 반복문이다.

$i: 1;

@while $i<5 {

  .p-#{$i} {

    background-color: red;

  }

  $i: $i + 1

}

 * @each 변수 in 리스트 변수 : 리스트의 값만큼 반복한다.

@each $l in a,b,c {

  .p-#{$l} {

    font: red;

  }

}

위에서 사스에 대한 문법만 작성하고 css로 변환된 모습은 보여주지 않았다. 어떻게 돌아가는지 확인하고 싶다면 css로 변환해주는 컴파일러를 설치하거나 https://www.sassmeister.com/ 이곳으로 가서 확인하면 된다.