CSS - SCSS가 뭘까?

SCSS가 도대체 뭘까?

CSS는 접근성도 좋고 배우기 좋습니다. 하지만 CSS는 작업이 고도화 될수록 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커지죠. 그러한 배경에서 나온 친구들이 Sass, Less, Stylus 입니다. 사스는요, 기초 언어에 힘과 우아함을 더해주는 CSS의 확장입니다. 웹에서는 CSS만 동작하는데 이것들은 어떻게 동작시킬까요?

---

SCSS로 코드 작성 방법

CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다. 전처리기로 작성하고 CSS로 컴파일해서 동작시키는 거죠.

---

왜 SCSS 일까?

Sass(SCSS)는 Less, Stylus 전처리기의 장점을 모두 가집니다. 문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능합니다. 또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭합니다.

---

변수 사용 방법

반복적으로 사용되는 값을 변수로 지정할 수 있습니다. 변수 이름 앞에는 항상 $를 붙입니다.

SCSS 코드

$color: #e96900;
$width: 200px;

.box {
    width: $width;
    margin-left: $width;
    background: $color;
}

CSS 코드

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