[React] sass(scss)설치하고 사용하기

Node-SASS?

css전처리기. Nesting을 활용하여 중복되는 코드를 줄일 수 있고 변수, 반복문, 함수 문법으로도 css를 작성할 수 있다.

설치방법

npm install node-sass

위와 같이 라이브러리설치를 진행하면 확장자 .scss로 css를 작성할 수 있으며 이 라이브러리는 css로 컴파일 해준다.

sass 사용하기

변수에 데이터를 저장해서 사용하는 법

$변수명 :  변수에 넣을 값 

///사용할 때 

.적용할 class {
color: $변수명
  }

기본 스타일 default 설정하기

css.reset파일에 default로 적용할 css를 작성 후 index.js에 import해준다

똑같은 styling을 다른 요소에 복사하고 싶을 때

.test {
	css작성
    .
    .
    color: red;
}
.test{
	@extend .test 
    color: yellow; 
    ///복사한 css에서 color값만 변경할 수 있다. 
}

위와 같이 작성하면 test에 있는 css를 test2에 붙여넣기 할 수 있다.

@mixin 과 @include 문법

@mixin은 함수만드는 문법이다.

@mixin 함수명() {
	css작성
    
}

.클래스명 {
	@includes 함수명()
}