선택자(Selector)를 만들 때 매 번 불필요한 선택자를 적어야 하고 동적인 기능이 적어 자동화하기 어렵고 모든 것을 수동으로 변경해야 하고 결국 중복되는 코드가 많아 유지보수에 좋지 않은 기존 CSS의 단점을 극복하기 위해 등장했습니다.
Sass(SCSS)는 CSS의 단점을 보완하고 효율을 올리기 위한 CSS 전처리기 언어입니다.
전처리기 언어 문법으로 작성하고 CSS로 컴파일해서 웹으로 동작시키는 자바스크립트와 타입스크립트의 관계와 비슷합니다.
vs CSS
- 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 사용을 줄일 수 있습니다.
- 변수(Variable)를 사용해 CSS 속성과 값의 일원화한 관리가 가능해집니다.
- 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능합니다.
SCSS vs Sass
- Sass가 먼저 생기고 나중에 SCSS가 나왔습니다. 그리고 이 둘은 서로 완벽하게 호환됩니다.
- 중괄호와 세미콜론의 유무에 따른 사용방식이 아주 조금 다릅니다.
- 재사용 기능을 만드는 방식인 믹스인(Mixins)에서 거의 유일한 차이가 있습니다.
기초 문법
중첩(Nesting)
상위 선택자의 반복을 피하고 복잡한 구조를 편리하게 작성할 수 있습니다.
상위 선택자 참조(Ampersand)
중첩 안에서 & 키워드를 통해 상위 선택자를 참조할 수 있습니다.
중첩 벗어나기(@at-root)
중첩에서 벗어나고 싶을 때 사용할 수 있습니다.
중첩 안의 변수는 이용하고 중첩 밖에서 사용해야 할 경우에 유용합니다.
중첩된 속성
margin-, font- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 그룹화하여 사용할 수 있습니다.
변수($)
변수를 $ 키워드를 통해 선언할 수 있으며 이 변수는 사용 가능한 유효 범위, 블록 레벨 스코프를 따릅니다.
전역 설정(!global)
변수 할당에 !global 키워드를 넣어 전역 변수로 설정할 수 있습니다.
초기값 설정(!default)
!default 키워드를 통해 할당되어 있는 변수가 있다면 변수가 기존 값을 사용하게 할 수 있습니다.
문자 보간(#{})
#{} 키워드를 이용해서 코드의 어디든지 변수 값을 넣을 수 있습니다.
