🤔 Sass란 ?

• Syntactically awesome style sheet
• CSS의 전처리기, CSS로 컴파일되는 스크립트 언어
• CSS에는 없는 프로그래밍 문법적인 요소들이 추가되었다.
  • 변수 선언 ($)
  • 반복문 (@for)
  • 조건문 (@if)
• 4가지 자료형을 지원한다.
  • number
  • string
  • color
  • boolean

Sass를 사용해야 하는 이유

• 규모가 큰 프로젝트에서는 CSS 만으로 관리가 어렵다!
• CSS 생산성을 높이고 깔끔하고 가독성좋은 코드로 관리 가능

Sass vs SCSS

• 같은 회사에서 나온 자매품(동일한 로고)
• SCSS는 Sass의 3 버전에서 등장

차이점

1. CSS 작성방법에 차이가 있다.

• Sass
  • {}생략
  • ;생략
  • 들여쓰기로 문법을 구문

$base-font: 16px;

p
  font-size: $base-font
  line-height: 1.5

• SCSS
  • SCSS는 기존의 CSS 문법이랑 비슷하다.

$base-font: 20px;

p {
  font-size: $base-font;
  line-height: 1.5;
}

CSS PreProcessor

• 모듈별로 특별한 Syntax를 가지고 있고 여기에 mixin, nesting selector, inheritance selector 등 프로그래밍적인 요소를 접목해 방대해지는 CSS 문서의 양을 효율적으로 처리하고 관리해주는 통합적이 단어
• 웹 서버가 인지하지 못하므로 Compiler를 통해 CSS 문서로 변한하여 사용해야 한다.

@for - 반복문

$unit: 20px;
$gutter: 5px;

@for $i from i through 12 {
  .col-#{$i} {
    width: $i * ($unit + $gutter);
  }
}

@if - 조건문

• 조건문으로 동등연산자, 비교연산자 사용 (==, !=, >= ...)

@if ($size == 24) {
    @include text-style-24;
  }

• type-of 연산자 사용 가능

@if (type-of($color) == color) {
    color: $color;
  }

• 논리연산자 사용 가능 (and, or, not)

@if ($type == fixed or $type == absolute) {
    position: $type;
    top: 50%;
    transform: translateY(-50%);
  }

모듈화

Sass는 main.scss를 두고 각 파일들을 용도에맞게 분리하여 @import 하는 방식으로 사용

모듈로 분리해내서 사용하는 파일명들은 앞에 _를 붙여주자
_를 붙이면 import한 scss 파일에 대해 별도의 컴파일하지 않고 main.scss에서 한꺼번에 style.css로 컴파일됨