scss

SCSS

웹 프로젝트의 규모가 커지고, 복잡도가 증가할수록 표준 CSS만으로 CSS를 관리하기 어려워졌고, CSS 코드의 재사용성과 관리를 위한 스타일 시트의 일종으로 전처리기 즉 CSS로 컴파일 되는 언어가 개발됩니다. SCSS는 SaaS라는 전처리기의 3버전에서 등장한 어어이며, 퍼블리셔에게 익숙한 CSS문법을 사용하여 작성할 수 있습니다.

동작방식

웹에서는 CSS만을 인식할 수 있기 때문에 SCSS 또는 전처리기 언어로 작성된 스타일시트는 반드시 컴파일되어야 합니다. SCSS 컴파일러를 통해 우리가 작성한 SCSS코드를 CSS형태로 만들어줍니다.

node-sass

npm install -g node-sass

node-sass [옵션] <입력파일 경로> [출력파일경로]
node-sass scss/main.css public/main.css

기본 문법

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

css와 마찬가지로 {}와;를 사용한다.

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Mixins는 재사용 가능한 코드를 만드는 기능으로, @mixin으로 정의한뒤, 원하는 위치에서 @include로 사용한다.

중첩

SCSS:

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

CSS:

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

Ampersand(사위 선택자 참조)

&을 이용하여 상위값을 참조한다. SCSS:

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

CSS:

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

SCSS:

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

CSS:

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

변수

반복적으로 사용되는 값은 $을 사용하여 변수로 지정할 수 있습니다. SCSS:

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

CSS

.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

!global키워드를 통해 전역으로 설저잉 가능합니다. SCSS:

.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}

CSS:

.box1 {
  background: #111;
}
.box2 {
  background: #111;
}

연산(operations)

scss에서는 기본적인 연산자를 지원합니다.

div {
  width: 20px + 20px;  // 더하기
  height: 40px - 10px;  // 빼기
  font-size: 10px * 2;  // 곱하기
  margin: 30px / 2;  // 나누기
  content: "Hello " + World;
  background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
}

@if와 &&,||,!와 같은 논리연산자도 사용가능합니다. SCSS:

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