CSS - SCSS

SCSS

Sass(SCSS)란 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.

---

CSS, SCSS의 차이점

SCSS 와 CSS의 차이점에는 CSS는 id,class로 스타일을 선언해 css에 넣어주는 반면에 SCSS는 $기호를 사용해서 직접 변수를 만든뒤 넣습니다. 예시로 확인하겠습니다.

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

위의 표현이 CSS에서 사용하는 기본 표현이라면 SCSS에서는 변수를 선언해 아래쪽처럼 표현할 수 있습니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}