CSS | Sass(CSS전처리기)

📍 Sass(Syntactically Awesome StyleSheets)

#1. Sass

Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기) 로서 CSS의 한계와 단점을 보완하여 보다 가독성 이 높고 코드의 재사용 에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.

이러한 CSS 의 태생적 한계를 보완하기 위해 Sass 는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS 와 비교하여 Sass 는 아래와 같은 장점이 있다.

• CSS보다 심플한 표기법으로 CSS를 구조화 하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성 을 큰 폭으로 향상시킬 수 있다.

.list {
  float: left;
  width: 100px;
  li {
    background: url(('./image.jpg'));
    color: red;
    /* & : 본인선택(li) */
    &:last-child {
      margin-right: -10px;
    }
    /* 본인(li)과 본인에 인접한 형제(li) 선택 */
    & + & {
      border-top: 1px solid #dee2e6;
    }
  }
}

CSS와 달리 하위 요소를 직접 넣을 수 있어 가독성이 좋아진다.

• & 은 본인을 선택 할 수 있게 해준다.
• & + & 처럼 본인과 본인에 인접한 형제요소를 선택 할 수도 있다.
• &:hover 나 &:nth-child 같은 선택자들도 사용 할 수 있다.

#2. 설치

브라우저는 Sass 의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 CSS파일로 트랜스파일링(컴파일) 하여야 한다. 따라서 Sass 환경의 설치가 필요하다.

Sass는 2006년 Ruby로 처음 개발되었고 이후 Ruby Sass를 C++로 포팅한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장했다. Sass는 최근에 Dart Sass로 재구현되었다. Libsass나 node-sass는 현재 유지 관리는 되고 있으나 폐지되었으므로 Dart Sass를 사용하는 것이 좋다.

터미널에서 npm을 사용해 설치한다.

$ npm install -g sass

#3. SASS 표기법 vs SCSS 표기법

Sass는 SASS 표기법(.sass) 과 SCSS 표기법(.scss) 이 있다. 이전에는 SASS 표기법이 기본 표기법이었으나 Sass3.0부터 CSS 친화적인 SCSS（Sassy CSS） 표기법이 기본 표기법이 되었다. SASS 표기법 은 보다 코딩을 간략화할 수 있는 장점이 있지만 CSS 친화적인 SCSS 표기법 를 사용하는 경우가 더 많다

	CSS	SCSS	SASS
중괄호 {}	필요	필요	불필요（공백 2문자 들여쓰기가 코드 블록을 의미)
세미콜론 ;	필요	필요	불필요
: 뒤의 공백	불필요	불필요	필요
Mixin	없음	@mixin	=
Include	없음	@include	+
확장자	.css	.scss	.sass

SASS표기법은 선택자의 유효범위를 들여쓰기로 구분하고, SCSS는 {}로 범위를 구분한다.