Как оформить начальный атрибут расширенного арии с помощью SASS

Question

Я пытаюсь стилизовать атрибут начальной загрузки 4 aria-expanded класса accordion-header с помощью SASS.

Возможно ли это?

Код HTML :

<div class="accordion">
    <div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false">
        Slide Title
    </div>
    <div class="accordion-body collapse" id="collapse_1" style="">
        This is the first slide. 
    </div>
</div>

Код SASS ::

.accordion{
    .accordion-header{
        position: relative;
        padding: 1rem;

        font-size: 18px;
        font-weight: bold;

        &.[aria-expanded="true"]{
          background-color: red;
        }
    }
}

Answer 1

Я обнаружил, что для целевого атрибута aria-expanded мне нужно просто удалить точку перед селектором, поэтому я изменил код с:

&.[aria-expanded="true"]{
  background-color: red;
}

на этот:

&[aria-expanded="true"]{
   background-color: red;
}