SCSS

SCSS

scss는 sass의 3버전에서 등장한 언어입니다. css와 비슷한 구문을 가지고 있으며,
css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트입니다.
sass기능을 지원하며, css와 거의 같은 문법으로 사용되는 장점을 가지고 있습니다.

Sass(SCSS)

Sass란 Syntactically Awesome Style Sheets의 약자.
CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수를 쉽게 해줍니다.

---

CSS Preprocessor

CSS가 동작하기 전에 사용하는 기능이며, 전처리기를 통해 쉽게 입력을 하고 CSS로 변환시키는 것입니다.
CSS Preprocessor의 예로는 SCSS,Sass,Less 등이 있습니다.

---

Variable : 반복작업 줄이기

$로 시작하는 방식으로 입력하며, 색상이나 글꼴 등을 재사용할 경우에 코드의 양을 상당히 줄일 수 있는 효과를 가지고 있습니다.
$ 기호를 사용하여, 변수를 스타일시트 전체에서 재사용하려는 정보를 저장하여 사용됩니다.

SCSS

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

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

css

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

---

Nesting : 깔끔한 코드

괄호사이에 클래스명을 삽입하면, Sass가 알아서 컴파일 해줍니다.
Sass를 사용하면 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS를 중첩할 수 있습니다.
아래의 예제로 ul, li, 및 a가 nav내부에 중첩되어 있음을 알 수 있습니다. 이것은 CSS를 더 읽기 쉽게 만드는 좋은 방법입니다.

SCSS

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    li { display: inline-block; }
    
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

css

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}