2. SCSS 주요문법

SCSS 주요 문법

Nesting

---

• 자식태그에 각각 다른 블럭을 만들어 쓸 필요가 없음
• 축약형으로 묶을 수 있음 → xxx-yyy 식일 때, 앞에 xxx가 같은거 묶어서 쓰는거 가능

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

&

---

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

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

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

변수

---

• 문자열을 치환할 수 있음 (즉, 변수를 쓸 수 있음)
• 반복되는 작업에서, 굉장히 편리하게 이용할 수 있다.

$defaultSize: 20px;
$className: blue;

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