[CSS] &의 의미

흔히 mouse hover를 할 때 &:hover 에 대한 css내용을 적어서 처리를 한다

그러나 구글링을 하고 저렇게 써야한다는 것만 알았어서 & 에 대한 의미를 알아보고자 한다.

CSS가 아닌 CSS 전처리기인 Sass와 같은 것에서 사용되는 특별한 기호이다.

&는 중첨된 스타일 규칙에서 부모 선택자를 가리킨다. 또한, &는 직관적인 코드로 보이기에 많이들 활용한다.

예를 들어보자

.button {
  color: blue;
  
  &:hover {
    color: red;
  }

  &.active {
    font-weight: bold;
  }
}

파일을 위와 같이 작성했을 때 아래와 같이 컴파일되어 나타난다.

.button {
  color: blue;
}

.button:hover {
  color: red;
}

.button.active {
  font-weight: bold;
}

현재 UI 요소 만들기 강의를 들었을 때 &.current 를 활용하면서 기존과 보았던 다른 문법 형태길래 찾아 보았다.

대체적으로 위의 예시들처럼 Saas에서 중첩 기능을 사용하여 클래스 추가를 한다.

요약 - & 는 현재 부모 선택자를 참조하여 중첩된 스타일 규칙을 작성하는 데 사용한다.