[CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기

Quasar프레임워크를 사용하다가 css를 변경할 때, Quasar가 가지고 있는 클래스를 재정의하여 사용하곤 한다.

하지만 기존 css의 가상 클래스 중 :active, :focus는 Quasar가 가지고 있는 클래스에 붙여 사용하려 해도 적용되지 않는 경우가 있다.

예를들어 q-tab의 경우이다.

개발자 도구를 들여다 보면 활성화된 탭에는 q-tab--active라는 클래스가, 비활성화된 탭에는 q-tab--inactive라는 클래스가 적용되어있다.

이러한 경우 q-tab:active 또는 q-tab:focus를 사용한다고 하더라도 적용 자체가 되지 않거나, 원하는 결과를 얻기가 어렵다.

 

Quasar에서 가상클래스 재정의 하는 법

* Quasar자체에서 제공하는 클래스를 가상클래스라고 정의하기에는 확실하지 않지만, 가상클래스와 비슷한 기능을 한다는 점에서 가상클래스라는 단어를 사용했다.

 

//header 탭 활성/비활성
.q-tab--inactive
  color:#888
.q-tab--active
  color:#333

 

첫번째 방법은 클래스 명 자체를 가져와서 재정의 하는 방법이다. 기존의 방법과 동일하게 사용할 수 있지만, css 코드가 길어질수록 직관성이 떨어진다. 

 

//header 탭 활성/비활성
.q-tab
    &--inactive
      color:#888
    &--active
      color:#333

 

두번째 방법은 해당하는 요소의 활성화와 비활성화 상태를 한번에 정의하는 방법이다. 

개인적으로 활성화 상태와 비활성 상태는 수정을 함께 해야하는 경우가 많기 때문에 이 방법을 선호한다.