&

개념

Sass에서 기호 &은 부모 선택자를 참조하는 것을 뜻한다.
스타일링 코드 안에서 &은 그 자체로 부모 선택자를 가리키는 것으로, 같은 선택자에서 조금 더 덧붙인 선택자를 입력할 때 유용하게 쓸 수 있다.

예시

예를 들어 아래의 코드는,

.button {
  background-color: blue;

  &:hover {
    background-color: lightblue;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  &::before {
    content: "→";
  }
  
  &.active {
    background-color: red;
  }
  
  &-icon {
  	width: 24px;
  }
  
  
}

컴파일링을 하면 css파일에 다음과 같이 컴파일된다.

.button {
  background-color: blue;
}

.button:hover {
  background-color: lightblue;
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.button::before {
  content: "→";
}

.button.active {
  background-color: red;
}

.button-icon {
  width: 24px;
}

스타일링 코드에서 & 을 입력하면 부모 선택자가 그대로 입력이 된다고 보면 될 것 같다.

정리

&은 상위 선택자를 반복할 필요가 없으므로 보다 유지 관리 가능하고 간결한 코드를 작성하는 데 도움이 된다.