Имеет ли значение порядок выбора SCSS (SASS) для вложенных классов

Question

Здесь у меня есть SCSS для стиля элементов списка. Что мне интересно, так это порядок выбора классов и псевдоселекторов. Так в основном, делает &:before.active равный &.active:before?

Вот полный пример последнего:

.sidebar-list {
  list-style-type: none;
  padding: 0;

  & li {
    padding: 4px 0;

    &:before {                      // Here,
      color: darken($font-color, 60%);
      font-family: "FontAwesome";
      content: "\f101\00a0";
    }

    &.selected:before {             // And here.
      color: darken($font-color, 30%);
    }
  }
}

И первая часть, которая имеет значение (внутри li):

    &:before {                 // Here,
      color: darken($font-color, 60%);
      font-family: "FontAwesome";
      content: "\f101\00a0";

      &.selected {             // And here. This would evaluate to "li:before.selected"
        color: darken($font-color, 30%);
      }
    }

Какой из них будет правильным для стилизации :before psuedo-селектор для элемента списка?

Спасибо!

Answer 1

Да, порядок имеет значение. li:before.selected будет в основном игнорироваться, потому что это недействительно.

Вот фрагмент, например:

span::before {
  content:'span::before (Normal)';
  background-color: #ddd;
}

/* Valid */
span.ribbon::before {
  content: "span.ribbon::before (Valid)";
  background-color: #0f0;
}

/* Invalid. Will be ignored */
span::before.ribbon {
  content: "span::before.ribbon (Invalid)";
  background-color: #f00;
}

<span></span>
<span class="ribbon"></span>

Кроме того, вы хотите использовать двойные двоеточия для ::before псевдоэлемент (обновлен в CSS3).

• Ссылка: Документы псевдоэлемента