SCSS 설치 방법

scss를 컴파일 시켜줄 package 설치

1. node.js가 설치된 VSCode에서 scss파일을 생성하고 터미널을 켠다.

2. node -v 현재 설치된 node js 버전을 확인 (v14.17.4)

3. npm -v node js와 함께 사용할 npm 버전을 확인(6.14.14)

4. npm install -g sass sass패키지 설치 -g플래그는 전역(global)

5. sass scss:css sass, scss파일을 css파일로 컴파일
   sass --help scss를 css로 컴파일하는 Usage제공

6. 컴파일 된 css폴더 생성된 것 확인

sass, scss파일을 만들 때, _를 붙이면 별도의 css파일로 컴파일 하지 않는다.

가져오기, 모듈

@import 규칙

• @import "./filename" 형식

• 큰따옴표를 사용하여 경로 설정

• @import url("./filename.scss") : url함수 그대로 컴파일된다.

• @import "./filename.scss" : 확장자를 사용하면 그대로 컴파일되어 css파일에서는 scss동작할 수 없게된다.

• @import "http://google.com/filename.scss" : http프로토콜이 그대로 컴파일된다.

• 위의 3가지 모두 컴파일 결과로 포함이 된다.

@use 규칙

• namespace 적용 가능

• 각 함수와 변수가 독립적으로 사용

• mixin, 함수, 변수의 이름이 충돌이 발생해서 문제가 생기는 것을 방지 👉🏻 모듈

• namespace.function() 형태로 사용

• 어디서 가져온 요소인지 직관적으로 알 수 있음

@forward 규칙

• forward를 이용해여 가져온 모듈 파일을 @use를 사용해 import하여 사용

• 해당 폴더 범위 밖에서 @use 사용할 수 있도록 해줌

• 내보낼 폴더에 @forword "./mixins" as mix-* 형식으로 정의

• mix-에 *자리에 mixin의 이름이 붙음

• 가져올 폴더에 @use "../filename/main" 으로 받아와서 사용
  
  
  
  

내장 모듈

더 많은 Built-In Modules에 대한 설명과 예제

• sass:color

• sass:list

• sass:map map에서 key와 value 관련된 값 등을 조회

• sass:math

• sass:mata Sass의 내부 작동에 대한 세부 정보를 노출

• sass:selector

• sass:string
  
  

Global Functions(전역 함수)

• hsl($hue $saturation $lightness) 색상 채도 명도

• hsla($hue $saturation $lightness / $alpha) 알파값 추가

• if($condition, $if-true, $if-false) 삼항연산자(조건 ? true : false)

• rgb($red $green $blue)

• rgba($red $green $blue / $alpha) 투명도 추가
  
  
  
  

디버그

• @debug "Medssage" console.log()와 유사

• @warn "Medssage" console.warn()과 유사

• @error "Medssage" console.error(), throw ""와 유사