Sass(SCSS)

STUDY/[ React ]

Sass(SCSS)

Lim임 2025. 9. 12. 17:31

css

작업이 커지면 불편해!!

선택자(selector) 만들때 부모요소 적어야대

함수도 없어서 자동화가 어려워!!

유지보수에 마이너스~

Sass (Syntactically Awesome StyleSheet)

css 확장판 스크립트 언어

css의 단점을 보완하기 위해 등장한 CSS 전처리기 언어이다.

웹은 CSS밖에 모르는 바보,,

Sass(SCSS)로 작성한 뒤 컴파일러가 CSS문법으로 변환해준다!!

변환된 코드를 웹이 인식하는 것!!

SaSS(SCSS)의 장점

CSS를 구조화 하여 표현할 수 있다.

변수의 사용, 조건문과 반복문, Import(모듈화),

Nesting(선택자 반복 줄여주는 기능),

Mixin(함수),

Extend/Inheritance(확장/상속)

등

선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일 수 있다

조건문과 반복문을 통해 동적으로 CSS관리가 가능하다.

Sass(SCSS)의 단점

전처리기 도구 필요, 컴파일 시간 소요

Sass SCSS

SCSS란 Sass의 3버전에서 등장한 언어이다

기존의 Sass 문법이 익숙치 않아서 퍼블리셔에게 익숙한 구문을 제공함

둘은 엄연히 다른 파일이라 확장자명도

.sass .scss로 다르다

그럼 뭘 써야하나요?

=> SCSS쓰자~ Sass공식에서 조차도 SCSS를 권장하고 있음(헤에~)

SCSS 사용하는 방법

node npm 깔려있죠???

npm install -g node-sass

node sass -v

// 오류 시 node rebuild node sass 를 쳐보자

기본형

node-sass [option] <inputfile> <outputfile>

예)

node-sass -w scss/style.scss css/style.css --output-style compressed

scss/sass 는 전처리 스크립트언어이기 때문에 scss와 css를 mapping 시켜주는 과정이 필요함(귀찮음)
--watch -w 는 파일을 감시하여 자동으로 변경사항을 컴파일해줌

--output-style compressed css 출력스타일을 compressed 형태로 해주겠대

[option]

-w, --watch 디렉토리 또는 파일 감시
-r, --recursive 재귀적으로 디렉토리나 파일을 감시합니다.
-o, --output 출력 디렉토리
-x, --omit-source-map-url 출력에서 소스 맵 URL 주석 생략
-i, --indented-syntax stdin의 데이터를 sass 코드로 처리(scss와 비교)
-q, --quiet 오류가 발생한 경우를 제외하고 로그 출력을 억제합니다.
-v, --version 버전 정보를 출력합니다.
--output-style CSS 출력 스타일(중첩 | 확장 | 압축 | 압축)
들여 쓰기 --indent - 입력 유형  에 대한 출력 CSS를 (공간 | 탭)
--indent-width 들여쓰기 너비 ; 공백 또는 탭 수(최대값: 10)
--linefeed 줄바꿈 스타일(cr | crlf | lf | lfcr)
--source-코멘트 디버그 정보 포함 에서 출력을
--source-map 소스 맵을 내 보냅니다.
--source-지도-내용 퍼가기는 내용을 포함 에서 지도를
--source-map-embed sourceMappingUrl을 데이터 URI로 포함
--source-map-root 기본 경로, 있는 그대로 소스 맵 에서 내 보냅니다.
보기에 --include 경로 경로 에 대한 가져온 파일
--follow 심볼릭 링크된 디렉토리를 따릅니다.
--precision 십진수에 허용 되는 정밀도의 양
--error-bell 오류 발생 시 벨 문자 출력
--importer 사용자 지정 가져오기 도구가 포함된 .js 파일의 경로
--functions 사용자 정의 함수가 포함된 .js 파일의 경로
--help 사용 정보 인쇄

---

extension 모음

자동컴파일러

Live Sass Compiler - Visual Studio Marketplace

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.

marketplace.visualstudio.com

오류알리미

scss-lint - Visual Studio Marketplace

Extension for Visual Studio Code - a scss-lint extension for vscode

marketplace.visualstudio.com

prettier

SCSS Formatter - Visual Studio Marketplace