SCSS 사용해보기!

SCSS란 그냥 CSS를 편하게 쓰도록 도와주는 친구라고 보면 된다

 

뒤에 .scss 라고 붙인 파일을 붙여저 style.css에 있는 내용을 모두 복사 붙이기

그리고 터미널에서 scss 확장 파일을 인스톨 해줘야한다

 

 

 

# 오류 메시지를 보면서 하나씩 설치하면 너무 느리니, 이번엔 제가 필요 패키지를 싹 가져왔어요! 
# 그대로 복사해주세요!

 

아래 코드로 scss 확장 설치
yarn add node-sass open-color sass-loader classnames

 

기본문법은 css와 유사하다

 

그러나 nesting이 가능하다 아래처럼 묶어서

```scss
//scss 네스팅 (묶어주기)
div {
	p {
		color: #888888;
		font: { // 폰트 속성도 묶어주기
		    family:sans-serif; 
		    size: 14px;
		}
	}
	
	img {
	    width: 400px;
	}
} 
```

- 상위 요소 이어쓰기는 "**&"로! 클래스명 등, 글자**도 이어쓸 수 있어요.

```scss
//scss
변수처럼 속성을 이용가능하다
div {
  background-color: green
  &:hover { background-color: blue } //hover를 이렇게 써준다 !
}

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

- 문자열을 치환할 수 있습니다! (즉, 변수를 쓸 수 있어요!)

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

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