Sass(SCSS) 단축속성 중첩과 상위 선택자 참조

Sass

Syntactically Awesome Style Sheets

단축속성 중첩과 상위 선택자 참조

단축속성

여러가지 css 속성의 값을 함께 지정할 수 있는 속성,
같은 주제를 가진 여러공통속성을 묶기위해 정의하는 속성이다.

대표적인 단축속성 : font, background, text

font의 하위속성

• font-family: sans-serif;
• font-size: 1em;
• font-style: normal;
• font-weight: 900;

⭐ 단축속성은 하위속성을 가진다.

단축 속성 중첩

⭐ Sass에서는 중첩을 이용해 단축 속성의 하위 속성을 그룹화할 수 있다.

SCSS 코드

p {
	font: {
   	family: sans-serif; 
       size: 1em;
       style: normal;
       weight: 900;
   };
}

이미 font 속성안에 한번 중첩되어 있어 접두어가 필요하지 않음 : font-size -> size
(네임스페이스 속성 중첩이라고도 불림)

---

상위 선택자 참조

& 기호로 상위 선택자 참조하기

& 기호를 사용해 상위 선택자를 참조 할 수 있다.

가상 클래스(의사클래스)를 선택하고자 할때 유용하다.
서로 다른 클래스에 서로 다른 스타일을 지정할때도 사용

상위 선택자 : 해당요소를 감싸고 있는 선택자

SCSS 코드

button {
	
   &:active {
   	backgroud-color: red;
   }
}

버튼 스타일 선언문안에서 &는 곧 버튼요소를 뜻한다.

CSS 컴파일 코드

button:active {
	background-color: red;
}

---

실습

단축속성 그룹화, &기호로 상위 선택자 참조하여 가상클래스 추가

.first-btn {
 &:hover {
   background: {
     color: red;
   };
 }
}
.second-btn {
 &:hover {
   background: {
     color: blue
   };
 }
}