더북(TheBook)

9.2.2 Sass 사용

 

9.2.2.1 현재 선택자 참조

특정 클래스에 마우스를 올릴 때나 클릭할 때 다른 스타일을 적용하려면 다음과 같이 CSS 코드를 작성해야 합니다.

.box:hover {
  background: red;
}
 
.box:active {
  background: yellow;
}

 

같은 내용을 Sass의 현재 선택자 참조 기능으로 작성할 수 있습니다. & 문자를 사용하여 다음과 같이 작성합니다.

.box {
  /* 스타일 설정... */
  &:hover {
    background: red;
  }
  &:active {
    background: yellow;
  }
}

 

이런 식으로 감싸인 구조로 CSS를 작성할 수 있기 때문에 가독성이 훨씬 높습니다. 그럼 한번 바로 적용해 볼까요? 우선 기존 App.css를 App.scss로 파일 이름을 변경해 보세요.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.