SASS

CSS 전처리기

SASS는 CSS전처리로 이 외에도 less나 Stylus등이 존재한다. 웹에서는 CSS만 동작하기 때문에 CSS 전처리기는 직접 동작할 수 없다. 따라서 전처리기로 작성한 경우 CSS로 컴파일하는 작업이 필요하다.

SASS와 SCSS

SASS는 중괄호와 세미콜론이 없으나 SCSS에는 존재한다.

// SASS
  li {
    color: #fff;
  }

// SCSS
  li
    color: #fff

컴파일 방법

node-sass

node.js를 컴파일러인 LibSass에 바인딩한 라이브러리로 NPM으로 전역 설치하여 사용한다.

npm install -g node-sass

parcel

웹 애플리케이션 번들러이다. NPM으로 전역 설치 후 Sass를 바로 사용할 수 있다.

npm install -g parcel-bundler

webpack

JS 모듈화 도구로 Webpack에서 더 자세한 사항을 확인할 수 있다.

npm install --save-dev webpack

문법

주석

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

데이터 종류

$number
$string
$color
$boolean
$null
$list : orange, royalblue ;
$map : (
  1:orange,
  2:royalblue
)

중첩 Nesting

&키워드를 통해 상위 선택자를 참조하여 치환한다.

.btn {
  position: absolute;
  &.active { // .btn.active
    color: #fff;
  }
}

.font-size {
  &-small // .font-size-small 
  { font-size: 12px; }
  &-medium // .font-size-medium
  { font-size: 14px; }
  &-large // .font-size-large
  { font-size: 16px; }
}

동일한 네임 스페이스를 가지는 속성들을 함께 사용할 수 있다.

.box {
  font: {
    weight: bold; // font-weight
    size: 10px; // font-size
    family: sans-serif; // font-family
  };
}

변수

반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 앞에는 항상 $을 붙인다.

$color-white : #fff;
$color-black : #000;

변수 유효범위가 있으며 재할당이 가능하다. global 사용 시 변수의 유효범위를 전역으로 설정할 수 있다.

.box {
  $color: #fff !global;
  background: $color;
}

default 사용하여 변수의 초기값을 설정할 수 있다. 즉, 할당되어 있으면 기존의 값을 사용한다.

$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary; // red
}

#{}을 통해 변수를 삽입할 수 있다.

$url: "naver.com";
@import url("#{$url}");

가져오기

@import로 외부에서 파일을 가져올 수 있다. 확장자를 생략하거나 여러 개를 동시에 작성할 수 있다.

@import url(".scss");
@import exam1.scss, exam2.scss, exam // 확장자 생략 가능, 동시 작성 가능

연산

산술연산자

+ - * / %

div {
  height: (100px / 2); // `/`연산의 경우 ()안에서 사용해야 함
  font-size: 24 + "px" // 24px
}

비교연산자

== != < > <= >=

논리연산자

and or not

$width: 90px;
div {
  @if not ($width > 100px and $width > 200px) {
    height: 300px; // 300px
  }
}

재활용

@mixin으로 선언하며 @include로 사용할 수 있다. 또한 @content을 통해 추가적인 내용을 작성할 수 있다.

@mixin box($size:20px){
  font-size: $size;
  @content
}

.container{
  p {
    @include box(16px){
      margin-left: 4px; // @content 선언을 통해 사용 가능
    }; 
  }
} 

확장

@extned을 사용하여 다른 선택자의 모든 스타일을 특정 선택자에서 가져가게 한다.

.btn{
  font-size: 20px;
}

.btn-green{
  @extend .btn; // .btn, btn-green {font-size:20px;}
  background: green;
}

함수

@function으로 함수를 정의할 수 있다. @return 지시어를 통해 특정 값을 반환한다.

@function ratio($size, $ratio){
  @return $size * $ratio
}

.ex{
  $width : 160px;
  width: $width;
  height: ratio($width, 16);
}

조건과 반복

if(조건, true, false)

$width: 100px;
div {
  width: if($width > 300px, $width, null);

@if()

@if (조건){
  /* 실행문 */
} @else if {
  /* 실행문 */
} @else{
  /* 실행문 */
}

@for $변수 From 시작 through/to 종료 {}

// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
}

// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
}

@each $변수 in 데이터 {}

// list나 map 데이터를 반복할 때 유용하다.
$list : orange, royalblue ;

@each $a in $list {
  li.#{$a}{
    color: $a;
  }
}

$map : (
  1:orange,
  2:royalblue
);

@each $k, $v in $map {
  .ex3-#{$k}{
    color: $v;
  }
}

@while 조건 {}

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 1;
}

내장 함수

scss function에서 모든 내장 함수를 확인할 수 있다.

Reference

• sassmeister을 통해 SCSS문법을 CSS로 변환할 수 있다.
• SASS에서 관련 정보를 확인할 수 있다.