[React] SASS 문법 정리

SASS란?

프로그래밍언어스럽게 작성가능한 Preprocessor로, CSS에서 변수, 연산자, 함수, extend, import를 사용 가능하다.

브라우저는 SASS문법을 모르기 때문에 SASS로 작성 파일을 다시 CSS로 컴파일해야하는데, 이 작업을 node-sass가 해준다.

 

설치방법

1. yarn add node-sass

2. import './파일이름.scss'; 해온다.

설치 시 생기는 버전상의 오류는 아래 게시글을 참고하면 좋다 ! 👍 

2021.09.17 - [🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍] - [오류처리] node-sass 설치오류, version 문제 해결

[오류처리] node-sass 설치오류, version 문제 해결

 

문법

1. $변수명: 변수에 넣을 값

$maincolor: #ff0000;

.red {
	color: $maincolor;
}

2. @import 파일경로

모든 페이지에 필요한 아래의 예시와 같은 것을 reset.scss로 미리 저장해둔다.

그리고 @import './reset.scss' 와 같이 import해서 사용한다.

쓸데없는 파일이니 컴파일을 자동으로 하지 말라고 표현할 때는 파일명 맨앞에 _를 붙인다. _reset.css와 같이!

body {
	margin: 0;
}

div {
	box-sizing: border-box;
}

3. nesting

div.container h1 {
	color: mint;
}
div.container p {
	color: blue;
}

div.container {
	h1 {
    	color: mint;
    }
    
    p {
    	color: blue;
    }
}

안에 넣어 관계를 표시하기 때문에, 전부 div.container 안에 있는 UI라는 것을 인식하기 쉬움

 

4. @extend

기존에는 클래스를 그대로 복붙해서 background만 바꿔서 적용했는데,  @extend를 이용하면 복붙을 안해도 되서 편리하다.

.customAlert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

.customAlert-yellow {
    @extend .customAlert;
    background: #ffe591;
}

5. @mixin / @include

mixin으로 함수를 만들고 (위에서 선언한다

include로 함수 가져가서 쓴다.

 

@mixin 함수() {

     ... css 속성

}

 

.클래스명 {

    @include 함수()

}

 

장점

sass문법으로 css작성하면 코드의 양이 줄어든다.