[Sass] Syntactically Awesome Style Sheets

Syntactically Awesome Style Sheets

CSS전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해줍니다.

Sass에서는 두가지 확장자 .scss와 .sass를 지원합니다.

Sass

• 중괄호({})와 세미클론(;)을 사용하지 않습니다.
• 코드 블록을 들여쓰기로 구분합니다.
• 간결하고 가벼운 문법을 가지고 있습니다.

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

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

Scss

• 중괄호({})와 세미클론(;)을 사용합니다.
• 기존의 CSS와 유사한 문법을 가지고 있어 기존 CSS 코드를 쉽게 포팅할 수 있습니다.
  scss

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

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

주로 프로젝트에 따라 개발자의 취향에 따라 .sass 또는 .scss 중 하나를 선택하여 사용하며, 두 형식 모두 장단점을 고려하여 적절히 활용됩니다.