SCSS 사용하기

 

SCSS란?

- SCSS는 SASS의 3번째 버전에서 추가됨.

- SASS의 모든 기능을 쓸 수 있고 CSS와 호환도 잘 되는 버전.

 

SCSS 사용법

yarn add node-sass@4.14.1 open-color sass-loader classnames

- 새로운 패키지를 설치하였다면, 리액트를 다시 시작해주자.

 

SCSS 문법

Nesting

- div 아래에 p, img 태그 스타일을 줄 때, 각각 다른 블럭을 만들어 쓸 필요가 없다.

- 축약형으로 묶을 수 있다.

    → xxx-yyy 식일 때, 앞에 xxx가 같은 친구끼리 묶어 쓸 수 있다.

//scss
div {
	p {
		color: #888888;
		font: {
		    family:sans-serif; 
		    size: 14px;
		}
	}
	
	img {
	    width: 400px;
	}
}

 

상위요소 이어쓰기

- "&"

- 클래스명 등, 글자도 이어쓸 수 있다.

//scss
div {
  background-color: green
  &:hover { background-color: blue }
}

.div {
  background-color: green
 &_blue { background-color: blue }
}

 

문자열 치환

- 변수를 사용가능

//scss
$defaultSize: 20px;
$className: blue;

p{
	font-size: #{$defaultSize};
	&.#{$className} {color: #{$className}}
}