Sass – Sass 소개

w3.css

Sass 소개

• Sass는 Syntactically A wesome Style Sheet의 약어다.
• Sass는 CSS의 확장이다.
• Sass는 CSS 전처리기다.
• Sass는 모든 버전의 CSS와 완벽하게 호환된다.
• Sass는 CSS의 반복을 줄여 시간을 절약한다.
• Sass는 Hampton Catlin이 디자인하고 2006년 Natalie Weizenbaum이 개발했다.
• Sass는 무료로 다운로드하여 사용할 수 있다.

공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.

왜 Sass 를 사용할까?

스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있다.
이 때 CSS 전처리기가 도움이 될 수 있다.

Sass를 사용하면 변수, 중첩 규칙, 믹스인, 가져오기, 상속, 내장 함수 등 CSS에 없는 기능을 사용할 수 있다.

SCSS / Sass 차이

Sass에는 두 가지 문법이 있다.

• SCSS 문법(.scss): 가장 일반적으로 사용된다. 중괄호로 구분하기 때문에 여러 줄 쓰기가 지원된다.
• Sass 문법(.sass): 들여쓰기 문법. 중괄호 대신 들여쓰기를 사용하여 문장을 중첩하고 세미콜론 대신 줄바꿈을 사용하여 문장을 구분하기 때문에 한 선택자에 대한 스타일을 한 줄에 다 써야한다.

아래 예시를 확인하면 더 구분이 쉽다.

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

  font: 100% $font-stack;

  color: $primary-color;

}

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

  font: 100% $font-stack

  color: $primary-color

Sass 가 유용한 이유에 대한 간단한 예

세 가지 주요 색상을 갖춘 웹사이트가 있다고 가정해 보자.

그럼 그 HEX 값을 몇 번이나 입력해야 할까? 여러번 입력해야한다. 그리고 같은 색상의 변형은 어떨까?

위의 값을 여러 번 입력하는 대신 Sass를 사용하여 다음과 같이 작성할 수 있다.

1단계) HTML 추가

$primary_1: #a2b9bc;

$primary_2: #b2ad7f;

$primary_3: #878f99;

.main-header {

  background-color: $primary_1;

}

.menu-left {

  background-color: $primary_2;

}

.menu-right {

  background-color: $primary_3;

}