SCSS

SCSS(Super CSS)

CSS의 단점을 보완한 CSS 전처리기 언어입니다.

---

※ CSS 전처리기 언어란?

CSS의 단점을 보완하기 위해 문법을 바꾼 형태로 직접 동작시키지 않지만 코드를 작성시 CSS로 컴파일 해서 CSS가 웹으로 동작하도록 하는 언어입니다.

1. SCSS

SCSS는 현재 가장 많이 쓰이고 있는 CSS 전처리기 언어로 초기에 나온 SASS를 버전 업한 언어입니다.

▶ SCSS 장점

1. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있습니다.
2. 가독성과 재사용성을 높여주어 유지보수가 쉽습니다.
3. 변수를 사용해 CSS 속성값을 통일해 사용할 수 있습니다.
4. 선택자의 중첩 사용으로 편의성을 높여줍니다.
5. 조건문, 반복문을 사용해 동적으로 CSS 관리가 가능합니다.
6. 상속되는 선택자를 계층적으로 명시해서 불필요한 반복을 줄일 수 있습니다.

▶ 변수

"$"를 사용해서 요소를 변수로 만들 수 있습니다. 해당 변수에 CSS의 속성값을 저장할 수 있으며, 스타일시트 전체에 반복해 사용이 가능합니다.

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

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

SCSS가 처리될 때 변수에 저장된 값을 사용해 CSS에 배치된 변수값과 함께 CSS를 출력합니다.
이러한 방식으로 코드의 일관성을 높일 수 있습니다.

▶ 중첩

HTML에선 코드를 작성할 때 같은 코드를 반복하고 시각적인 계층 구조가 발생하게 되는데, CSS는 그렇지 않습니다.
SCSS를 사용하면 선택자 안에 중첩해 사용하므로서 반복적인 사용을 줄이고 계층 구조를 사용한 것 처럼 일관적인 가독성이 증가하게 됩니다.

nav {
　　ul {
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}

　　li { display: inline-block; }

　　a {
　　　　display: block;
　　　　padding: 6px 12px;
　　　　text-decoration: none;
　　}
}

위의 예에서 ul, li, a의 선택자가 nav 안에 들어가 중첩되어 있어 쉽게 구별될 수 있음을 알 수 있습니다.