sass

sass

css PreProcesser
sass를 Web Browswer을 읽지 못하므로
sass 파일을 css 파일로 Build(변환)해야 한다.

sass ? scss ?

두가지 모두 sass가 맞지만
sass는 두가지 문법을 지원 확장자.sass/.scss
({}사용을 안함 들여쓰기를 사용)
scss는 sass의 문법 이다.

Libsass node 기반의 sass 현업에서 사용 많이함
버전 업데이트가 되지 않지만 호환은 된다
공식 홈페이지에서 dart-sass를 권장한다.

Rudy Sass는 웬만해서 사용하지 않는다.

DartSass

공식 문서에 보면 DartSass를 기본으로 권장하고있다.

Sass설치

• npm install sass
• yarn add sass
  (dependencies 환경)
  npm install --save-dev sass
  (npm i -D sass)
  개발 의존 모듈 (개발할때만 필요할때)
  devDependencies

오늘 배워본 내용

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

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

$를 붙여 변수에 담아 @import하여 사용할 수 있다.
@mixin을 통해 원하는 css를 미리 짜두고 한번에 불러 사용이 가능하다.

연습 sass 연습 사이트
https://www.sassmeister.com/