요약

설치

 

$ npm install -g sass

 

 

버전확인

 

$ sass --version

 

 

트랜스파일링(컴파일)

 

$ sass src/sass:dist/css

 

package.json 사용시

  "scripts": {

    "build:sass": "sass --style compressed src/sass:dist/css",

  },

 

변수

$변수명

$변수명 : 값  !global  // 전역변수로 바꿀때

$변수명 : 값  !default // 초기값

 

Interpolation

 

#{$변수명}   // 변수의 값을 문자열로 삽입

 

Ampersand

 

&:hover // &는 부모요소를 참조하는 셀렉터이다.

 

 

Nesting // 선언을 중첩

#navbar{

    ul{

        li{

            ...

        }

    }

}

 

연산자

 

+ - * / % == !=  

단, / 는 주의해야함.

 

partial : 기능에 따라 CSS 파일을 분리
_name // @import 가능, 트랜스파일링 x

@import // 가져와서 사용

@use // import 대체

@forward // 중간에서 결합하여, use 를 적게 사용

@extend // 상속

% // Placeholder Selector , @extend 전용 , 재사용

if // if(조건, 참, 거짓)

@if ... @else

@for // 반복

@each // 리스트 반복

@while // 반복

@mixin //  @include으로 style 반환

@function // @return으로 값을 반환

주석 
css  /**/ 만 가능
scss // , /**/ 가능

 

기본내장함수
https://js0616.tistory.com/304

04. 기본 내장 함수

 

webpack 환경 사용법

https://js0616.tistory.com/305

05. Webpack 개발 환경에서 Sass 사용하기

 

---

예시

// src/sass/main.scss

@import "./partials/var";

@import "./partials/body";

@import "./partials/catImg"

 

// src/sass/partials/_vars.scss

$font_color: red;

$font_family: Arial, sans-serif;

$font_size: 32px;

$line_height: percentage(calc(20px / $font_size));

$box_size : 100px

 

// src/sass/partials/_body.scss

body {

  color: $font_color ;

  // Property Nesting

  font: {

    size: $font_size;

    family: $font_family;

  }

  line-height: $line_height;

}