SCSS

SASS, SCSS

• SASS와 SCSS는 둘다 CSS를 편하게 쓰도록 도와주는 도구이다.
• SCCS는 SASS의 3번째 버전에서 추가된 것인데, SASS의 모든 기능을 사용할 수 있고 CSS와 호환도 잘 된다!

---

SCSS

• SCSS를 사용하기 위해서 node-sass 패키지와 다른 필요 패키치를 설치해야 한다.
• VSCode를 열고 리액트 프로젝트를 만들 폴더에서 bash로 터미널을 열어 아래 명령어로 설치하자.

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

SCSS 문법

• 기본 문법은 CSS와 동일하지만 몇가지 편리한 문법들이 존재한다!
• https://sass-lang.com/documentation

Sass: Documentation

• 위 링크는 SCSS 공식문서이다. CSS 쓸 때, 모든 속성 값을 외우지 않는 것처럼 자주 쓰는 몇가지만 알자.

Nesting

• 같은 부모에 속하는 것들을 묶어서 사용할 수 있다.
• 예를 들어 div 태그 아래 p, img 태그의 스타일을 줄 때, CSS 처럼 각각 다른 블럭을 만들어 쓸 필요가 없다.
• CSS에서 아래와 같이 사용했다면,

div > p {
    color: #888888;
}

div > img {
    width: 400px;
}

• SCSS에서는 아래와 같이 같은 부모에 속하는 것들을 묶어서 사용할 수 있다.

div {
	p {
		color: #888888;
	}
	
	img {
	    width: 400px;
	}
}

축약형

• 접두어가 같은 것들을 묶어서 사용할 수 있다.
• CSS에서 아래와 같이 사용한다면,

p {
    color: #888888;
    font-family: sans-serif;
    font-size: 14px;
}

• SCSS에서는 아래와 같이 접두어가 같은 것들을 묶어서 사용할 수 있다.

p {
    color: #888888;
    font: {
        family:sans-serif; 
        size: 14px;
    }
}

상위 요소 이어쓰기 "&"

• 예를들어 div에 보통 hover와 같은 스타일을 사용할 때, 아래와 같이 기존 속성과 다른 블록을 사용해서 쓴다.

div {
    background-color: green;
}

div:hover {
    background-color: blue;
}

• 이것을 하나의 태그로 묶어서 기존 div에 들어가는 속성을 쓰고 &를 사용하면 div라는 상위 요소가 &에 들어간다.

div {
    background-color: green
    &:hover { background-color: blue; }
}

• 즉, 위의 코드에서 &:hover { background-color: blue; }는 아래와 같이 변경된다.

div:hover { background-color: blue; }

문자열 치환

• 변수를 사용할 수 있다. 개꿀임
• $로 변수를 선언해서 태그 안의 스타일에 #{ }안에 사용해 주면 된다.

$defaultSize: 20px;

p{
	font-size: #{$defaultSize};
}

• 위 코드는 아래 CSS 코드와 같다.

p{
	font-size: 20px;
}