SCSS

CSS의 장점

• 처음에 사용하기 쉽다

CSS의 단점

• 불필요한 selector의 과용
• 연산기능의 한계
• statement의 부재

-> 이러한 단점은 작업이 고도화되고 프로젝트의 규모가 커질수록 더욱 가중.

CSS Preprocessor(CSS 전처리기)의 도입

• CSS의 단점을 개선하기 위해 도입
• CSS 문법과 굉장히 유사함
  하지만 selector의 nesting이나 조건문, 반복문, 다양한 단위의 연산 등 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
  단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일하여 동작시킨다.

그 때문에 터미널에서

$ npm install -g node-sass
$ node-sass -v

약간의 설치과정이 필요하다.

나는 우분투 때문인지 설치가 잘 되지 않아 고생을 매우 많이 했다. 그러나 정상적인 경우라면 위의 경우처럼 설치과정이 그다지 복잡하지 않다.(npm, node.js 등은 깔려있다고 가정한다.)

SCSS의 문법

SCSS의 문법은 SCSS방식으로 쓴 코드가 어떻게 컴파일되는지를 해석하며 분석해보겠다.

1. Nesting(중첩)

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

compiled to:

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

2. 상위 Selector 참조

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

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

compiled to:

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

& 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용도 가능하다.

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

compiled to:

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

3. nesting에서 벗어나기

@at-root 키워드를 사용한다.
중첩 안에서 생성하지만 중첩 밖에서 사용해야 할 경우에 유용하다.

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

compiled to:

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

4. 중첩된 속성

동일한 네임 스페이스를 가지는 속성들을 좀 더 편하게 사용할 수 있다.

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

compiled to:

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

5. 변수

반복적으로 사용되는 값은 변수로 지정할 수 있다.
변수 이름 앞에는 항상 $를 붙인다.
다만, 변수는 선언된 scope 내에서만 유효하다.

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

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

compiled to:

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

일단 실제로 사용하고 있는 건 아직 이 정도인데, 연산을 통해 사용하는 것은 아직 실제로 해보지 못했다. 실제 필드에서 사용하고 있는지 알아봐야겠다.