scss - &

보통 & 기호는 현재 선택한 요소를 나타냅니다.

&::는 이러한 기능을 확장하여 부모 요소에 스타일을 적용하거나 조작할 수 있게 합니다.

.button {
  background-color: blue;

  &:hover {
    background-color: red;
  }
}

위의 코드에서 &:hover는 .button 요소에 대한 hover 상태를 나타냅니다. 이때 &는 .button을 나타냅니다.

 

.button {
  background-color: blue;

  &.active {
    background-color: green;
  }
}

위의 코드에서 .button.active는 .button의 자식으로 .active 클래스가 있는 경우에 적용됩니다.

이때 &는 .button을 나타내며, &.active는 .button.active를 생성합니다.

 

따라서 &::는 SCSS에서 부모 선택자를 조작하는 강력한 도구로 사용될 수 있습니다.