Sass 기본 사용법

🔗참고자료

📌 Sass가 무엇인가

• CSS는 규모가 커질 수록 코드가 복잡해지고 유지보수가 불편해진다.

→ SASS는 코드를 수정하거나, 코드 조각을 재사용하기 편리하다.

📌 Sass(Syntactically Awesome StyleSheets)

• CSS의 단점을 메워 더 빠르고 효율적인 스타일을 작성할 수 있는 구문
• CSS 전처리기(Preprocessor)

📌 SCSS

• SCSS 구문을 이용해 코드를 작성하면, Sass 전처리기는 이 또한 CSS로 변환한다.
• 사람들은 Sass구문보다 SCSS구문을 선호하는 경향이 있다.
• SCSS 구문을 이용해 코드를 작성하면 Sass 전처리기는 이 또한 CSS로 변환한다.
• SCSS는 Sass 프로그래밍 언어의 하위개념
• 쉽게 SCSS = Sass

📌 주석(Comment)

• 첫 번째 방법, CSS 주석과 같은 방법
  • CSS로 컴파일 시 반영이 된다.
• 두 번째 방법, 한 줄의 텍스트만 포함할 수 있는 형태의 주석 사용
  • CSS로 컴파일 시 반영이 되지 않는다.

/* 여러 줄의
주석이 가능하다
*/

//아니야 한줄씩만 할래
//그려그려

📌 중첩 (Nesting)

• CSS에서는 스타일을 정의하기 위해서 선택자를 서로 다른 선언문에서 반복했었다. 하지만 Sass에서는 중첩해서 사용이 가능하다. → 컴파일 후 CSS파일에는 선택자가 각자 따로 생성되어 반영된다.

📌 단축 속성

• Sass 에서는 중첩을 이용해 단축 속성의 하위 속성을 그룹화 할 수 있다.

🔻 네임스페이스 속성 중첩

📌 상위 선택자 참조하기

• 기호 &(앰퍼샌드) 를 사용해 상위 선택자(자신을 감싸고 있는 요소)를 참조할 수 있다.
• 가상 요소 선택자를 선택하고자 할때 유용한 방법이며, 서로 다른 클래스에 서로 다른스타일을 지정할 때도 사용할 수 있다.

📌 변수

• 재사용할 정보 저장방법
• 변수 명에는 영문자, 숫자, ‘-’(마이너스), ‘_’(언더바) 사용 가능
• 변수 선언 → $변수명

$primary-color : pink;
$sub-color: white;

button {
  &:first-child {
    color: $sub-color;
    background: $primary-color;
    width: 100px;
  }
}

📌 믹스인

• 사이트 전체에서 재사용할 스타일 그룹을 정의할 수 있다.
• 믹스인 생성 → @mixin
• 믹스인 사용 → @inlude
• 지시자 뒤에 만들고자하는 믹스인의 이름을 써준다.

• 인자를 사용할 수 있다.
  • 믹스인 정의 시에 괄호와 함께 벼누를 추가하면 인자가 정의되고, 개수 제한은 없다.

• 인자의 기본 값을 지정할 수 있다.

📌 원투원 모드

• 1대 1로 컴파일 하는 방법
• npx sass

npx sass 변환할폴더/파일 폴더/파일

📌 매니투매니 모드

• 여러 개의 파일을 한꺼번에 컴파일 하는 방
• npx sass

npx sass 폴더/타겟폴더

📌 파일 삭제 명령

rm -rf 삭제할폴더/파일

📌 style 옵션 명령

• expended 개발자모드
• compressed 배포모드(압축모드)

$ npx sass --style=compressed 폴더/타겟폴더 

📌 source-map 옵션 명령

• 원본의 위치의 라인 넘버를 제공 → 유지보수 및 수정 시 파악 가능(개발할 때 유용)
• 배포단계에서 소스맵 옵션을 끄고 싶을 때 사용
• npx sass --no-source-map

npx sass --no-source-map 폴더/파일

📌 watch 옵션 명령

• Sass 파일이 수정되면 자동으로 CSS 파일로 빌드시켜준다.
• —see 그냥 보는 것, —watch 관찰하는 것
• watch 모드 종료 시 Ctrl + C
• npx sass --watch

$ npx sass --watch scss:css
[2023-06-16 13:27] Compiled scss\style.scss to css\style.css.
[2023-06-16 13:27] Compiled scss\test.scss to css\test.css.
Sass is watching for changes. Press Ctrl-C to stop.

📌 자주 쓰는 명령어 등록 및 사용하기

• 매번 명령어를 입력하는 건 비효율적 → 명령어로 등록해놓기
• 등록 → package.json 파일안에 입력하기
• 사용하기 → npm run

"scripts": {
    "sass": "sass scss:css"
		"sass-compressed": "sass --style=compressed scss:css"
  },

---

npm run sass
npm run sass-compressed

📌 자주 쓰는 명령어 등록 및 사용하기

• 반복되는 옵션들을 더 간추려서 명령어 등록하기
• 더블 대시( — — ) 사용 하는 이유 →npm 명령을 다른 npm 명령에 등록하기 위한 규칙
• 수정 전🔻

"scripts": {
    "start": "run-p sass-watch server",
    "sass": "sass scss:css",
    "sass-compressed": "sass --style=compressed scss:css",
    "sass-no-source-map": "sass --no-source-map scss:css",
    "sass-watch": "sass --watch scss:css",
    "clear": "rimraf css",
    "server": "live-server"
  },

• 수정 후🔻

"scripts": {
    "start": "run-p sass-watch server",
    "sass": "sass scss:css",
    "sass-compressed": "npm run sass -- --style=compressed",
    "sass-no-source-map": "npm run sass -- --no-source-map",
    "sass-watch": "npm run sass -- --watch",
    "clear": "rimraf css",
    "server": "live-server"
  },