오늘은 Sass에 대해서 배웠다...
pure css만 사용해 와서 너무너무 어색했다...
익숙해지려면 시간이 많이 걸릴 것 같ㄷㅏ
익숙해질 수 있을까???

---

🍎 오늘 배운 내용 정리

🍊 Sass란?

Sass는 CSS의 기능을 확장하기 위해 개발된 전처리기이다.
CSS의 단점을 보완하고 더 효율적인 스타일 작성 및 관리를 가능하게 한다.
Sass를 사용하면 변수, 중첩, 믹스인, 상속 등 다양한 고급 기능을 활용할 수 있다.

한줄 요약 : sass는 css를 간결하게 써서 css로 바꾸기 위한 상위 도구

게으른 게발자 되기!

---

🍊 Sass VS SCSS

Sass는 두 가지 다른 문법을 지원한다.
바로 Sass와 SCSS이다.

Sass (Syntactically Awesome Stylesheets):

• 2006년 개발 / 간결한 문법 사용
• 중괄호 {}나 세미콜론 ; 없이 들여쓰기 기반으로 작성

예)

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

body
  font: 100% $font-stack
  color: $primary-color

SCSS (Sassy CSS):

• SCSS는 2010년에 도입된 Sass의 새로운 문법
• CSS와 매우 유사하게 생겼으며, 중괄호 {}와 세미콜론 ;을 사용
• 기존 CSS 파일을 그대로 SCSS 파일로 사용할 수 있음

예)

$primary-color: #333;

body {
  color: $primary-color;
  font-size: 16px;
}

차이점 요약

• 문법 스타일: Sass는 들여쓰기 기반의 간결한 문법을 사용하고, SCSS는 전통적인 CSS 스타일을 따름.
• 호환성: SCSS는 기존 CSS 코드와 호환됨. 따라서 CSS 파일을 SCSS로 쉽게 변환할 수 있음.

---

🍊 컴파일 / 문법

Sass -> css 컴파일 명령

컴파일 명령어

sass input.scss output.css

• 가장 최근에 변경된 스타일시트만 컴파일 하려면 --update 플래그 사용

sass --update input.scss output.css

• 변경사항이 발생할 때 마다 지속적으로 변환 처리하도록 설정할 경우 --watch 플래그를 추가

sass --update --watch input.scss output.css

• 단일 파일이 아닌 폴더 안 모든 Sass 파일을 CSS 파일로 변환 처리할 경우 콜론(:)을 사용

sass --update --watch src/scss:public/css

• 출력 스타일을 변경할 경우 --style 플래그 설정

sass src/scss : public/css --style compressed

• 소스맵을 생성하지 않을 경우 --no-source-map 플래그 사용

sass src/scss:public/css --style compressed --no-source-map

Package.json

npm init -y 명령을 사용해 package.json 파일을 생성했다면 scripts 항목에 Sass CLI 명령어를 등록하여 사용할 수 있음.

명령을 실행하고자 하면 npm run [script 명령어] 입력

• style.scss 파일을 style.css 파일로 빌드

"sass" : "sass style.scss style.css"

• style.scss 파일에서 업데이트 된 코드만 style.css 파일로 빌드

"update" : "sass --update style.scss style.css"

• style.scss 파일의 변경 내용을 실시간으로 style.css 파일로 빌드

"watch" : "sass --update --watch style.scss style.css"

• scss 폴더 내 모든 Sass 파일을 한 번에 CSS 폴더로 빌드

"sass-all" : "sass scss:css"
"update-all" : "sass --update scss:css"
"watch-all" : "sass --update --watch scss:css"

• 출력 스타일을 compressed로 지정하여 CSS 파일로 빌드

"compressed" : "sass style.scss style.css --style compressed"

• SourceMap을 생성하지 않고 CSS 파일로 빌드

"no-map" : "sass style.scss style.css --no-source-map"

---

🍎 오늘의 궁금한 점

아무것도 몰라서 질문도 못하다 . . .