[SASS/SCSS] Sass 시작하기! - 개념과 기초

Sass 란?

Sass는 CSS 전처리기(Preprocessor) 라고도 합니다.
CSS가 만들어지기 전에 이런저런 여러 작업들을 먼저 처리해 주기 때문입니다.
따라서 브라우저가 Sass를 직접 로딩하는 것이 아니라 Sass를 기반으로 개발을 한 후,
CSS로 컴파일 하는 과정을 거쳐야합니다.

Sass나 Scss 쓰는 이유

CSS의 양이 많아지면 복잡하고 가독성이 좋지않습니다. 따라서 유지관리 또한 어려워지게 됩니다.
이러한 CSS내의 반복되는 내용도 줄이고, 효율적으로 만들어 줄 수 있는 방법이 Sass이기 때문에 사용을 하며,
Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들을
이용하여 유지보수와 편의성을 큰 폭으로 향상 시킬 수 있습니다.

Sass 기술방식

Sass를 작성하는 방법에 있어서는 기본적으로 두가지의 구문이 있습니다.
두가지에는 .sass와 .scss가 있으며,
일반적으로 CSS와 유사한 방식인 Scss를 사용을 많이 하는데,
이유는 Scss는 CSS와 동일하게 중괄호{}를 사용하는 방식이기 때문입니다.

// SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// SASS
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
    font: 100% $font-stack
    color: $primary-color

참고

Sass: Syntactically Awesome Style Sheets
Sass의 소개, 설치와 간단한 명령어 사용법