Sass(SCSS) 개념

Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며

코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어다.

CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다.

CSS 단점

선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.

CSS 전처리기(Preprocessor) 언어 란?
HTML, CSS를 깊게 다뤄본적이 있다면, Sass, Less, stylus 에 대해 한번쯤은 들어볼 수 있는데 이 것들이 바로 CSS 전처리기 이다.
(CSS Preprocessor 라고 부른다)전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등.

표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.

SCSS란

scss는 Sass의 3버전에서 등장한 언어이다.

자바나 php가 버젼이 있듯이 Saas도 시간이 지나면서 버젼업되며 불편한점이 개선되었고, 기존의 문법 방식이 너무 불편하고 익숙치 않아 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

• SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
• SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식

SCSS 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 빌드할 수 있다.

Sass 공식 레퍼런스 조차도 SASS보다 CSS와 더 비슷한 SCSS를 선호한다.

그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 압도적으로 더 많다. 

SCSS 장점

CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
  변수의 사용
  조건문과 반복문
  Import (모듈화)
  Nesting (선택자 반복 작성 줄여주는 기능)
  Mixin (함수 개념)
  Extend/Inheritance (확장/상속)

선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.