Scss

Scss

말그대로 Sass한 CSS라는 뜻이다.
가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 중괄호를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다.
단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다.

---

Preprocessing

CSS는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다.
여기서 전처리기가 도움이 될 수 있습니다. Sass에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 기타 유용한 기능과 같이 아직 CSS에는 존재하지 않는 기능이 있습니다.

sass --watch input.scss output.css 

-> --watch 플래그를 사용하여 개별 파일이나 디렉토리를 볼 수도 있습니다.
watch 플래그는 소스 파일의 변경 사항을 감시하고 Sass를 저장할 때마다 CSS를 다시 컴파일하도록 Sass에 지시합니다. 

---

Variables

색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 같은 항목을 저장할 수 있습니다.
Sass는 $ 기호를 사용하여 무언가를 변수로 만듭니다.

SCSS
$font-stack: Helvetica, sans-serif;

$primary-color: #333;


body {

font: 100% $font-stack;

color: $primary-color;

} 
-> Sass가 처리될 때 $font-stack 및 $primary-color에 대해 정의한 변수를 사용하고 CSS에 배치된 변수 값으로 일반 CSS를 출력합니다. 
사이트 전체에서 일관성을 유지할 때 매우 유용하다.

CSS
body {

font: 100% Helvetica, sans-serif;

color: #333;
}

---

Nesting

HTML을 작성할 때 중첩되고 시각적인 계층 구조가 있다. 반면 Sass를 사용하면 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;

}

}
->사이트 탐색에 대한 몇 가지 일반적인 스타일의 예입니다.

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;

}

=>ul, li 및 a 선택기가 탐색 선택기 내부에 중첩되어 있음을 알 수 있습니다.