<aside> ❗ CSS 파일이 컴파일 되기 전의 문서로써, CSS를 좀더 편리하게 활용할 수 있다.

</aside>

주석

1. CSS 방식 
/* background-color: orange; */

2. SCSS 방식
/* background-color: orange; */
<u>**//**</u> background-color: orange;

• SCSS의 주석은 두 가지 방식이 있다.

중첩

.container {
	<u>**>**</u> ul {
			li {
				font-size: 40px;
				.name {
					color: royalblue;
				}
				.age {
					color: orange;
				}
			}
		}
	}

• 선택자들이 중첩되면서 CSS에서 선택자들을 중복해서 써내려 갔던 문제점을 해결할 수 있다.
• 자식 태그를 표시하기 위해선 선택자 앞에 > 를 붙여 준다.

상위 선택자 참조 (&)

.btn {
	position: absolute;
	&.active {
		color: red;
	}
}

• &의 자리는 그 선택자가 속해 있는 상위 선택자로 치환된다.

중첩된 속성

**// SCSS**
.box {
	font<u>**:**</u> {
		weight: bold;
		size: 10px;
		family: sans-serif;
	}<u>**;**</u>
}

**// CSS**
.box {
	font-weight: bold;
	font-size: 10px;
	font-family: sans-serif;
}

• : 과 ; 가 각각 앞뒤로 붙는 것을 주의해야 한다.

변수