CSS 전처리기 (CSS Preprocessor)

문법적으로 편리하게 제공되는 전처리기의 양식에 맞게 파일을 작성하면
실제 실행전에 브라우저가 읽을 수 있는 CSS 파일로 변환 처리해준다.

Sass

Syntactically Awesome Style Sheets

사용방법:

npm install sass

문법 종류:

.sass -> .scss
최근에는 scss 문법을 사용하는 것을 권장

특징:

1. Nesting

• SPA 환경에서는 Router.js -> index.js -> index.html 에 모든 페이지 컴포넌트가 모이는 구조이기 때문에 각각의 css 파일에서 겹치는 선택자가 있다면 중복된다.
• 해결방법: CSS의 자손결합자를 사용
  a. 선택자 앞에 조상 선택자를 입력
  b. Nesting

2. 변수화

• 여러 곳에서 사용되거나 오타가 나기 쉬운 속성을 변수 처리함
  ex.

$primary-color : #333;

p {
	color: $primary-color;
}

3. & 선택자

• & 선택자 == 부모 선택자

사용방법:

button {
	width: 100px;
    
    &:hover {
    	width: 200px;
    }
}

4. mixin

• 중복되는 스타일 속성이 여러 개가 있을 때 한 번에 묶어서 사용

사용 방법:

@mixin 변수이름 {
	스타일 속성들~~
}

@mixin commonStyle {
	color: red;
    font-size: 20px;
    width: 300px;
}

.example {
	@include commonStyle;
}

@mixin variablesStyle($justify, $alignItems) {
	display: flex;
    justify-content: $justify;
    align-items: $alignItems;
}

.examples {
	@include variablesStyle('space-around', 'center');
}

• 인자를 사용하면 원하는 스타일 속성값에 인자를 넣어주고, 호출할 때 실제 들어가야 할 속성값을 입력

5. variables.scss 적용

• 여러 파일에서 사용하고 싶은 변수와 mixin은 variable.scss 파일에 작성해 준다.
• @import를 통해 불러와서 사용한다.

사용방법:

@import "../../styles/variables.scss"

.select {
	color: $primary-color;
}

.useMixin {
	@include commonStyle;
}