#7 - SCSS 중첩 - 상위 선택 (&)

상위 선택자 참조 (&)

SCSS

태그 중첩 시, 상위 선택자를 선택하여 중복 입력을 방지한다. 

 

.btn{
    width : 100px;
    height : 36px;
    background-color : black;
    &:hover{
        background-color : red;
    }
}

Compile 된 CSS

.btn {
  width: 100px;
  height: 36px;
  background-color: black;
}
.btn:hover {
  background-color: red;
}

 

---

상위 선택자 활용

여러 클래스를 사용하는 경우, 아래와 같이 활용할 수 있다.

SCSS

.class {
  &-small {
      height : 36px;
  }
  &-large {
      height : 26px;
  }
}

Compile 된 CSS

.class-small{
	height : 36px;
}

.class-large{
	height : 26px;
}