Можно ли стилизовать родителей определенного типа элемента в SASS?

Question

Я хочу сделать это:

.classname {
  color: red

  a& {
    color: blue;
  }
}

и скомпилировать его в:

.classname {
   color: red;
}

a.classname {
   color: blue;
}

Доступен ли синтаксис для поддержки этого?Я пытался использовать a&, #{a&} и функцию компаса #{append-selector("a", "&")}, но они не компилируются, a & делает, но результаты, очевидно, в a .classname, а не a.classname.

Answer 1

Я пытался продумать различные варианты, которые позволили бы вам сделать это, но я могу только вернуться с вопросом «почему»? Каков вариант использования, и почему вам нужно это делать по сравнению с чем-то еще, что дает тот же результат, что вы хотели бы сделать.

Answer 2

Мне не удалось найти решение для тегов, но в данном конкретном случае вы можете использовать &[href]. Он медленнее, но на самом деле он более точный (некоторые теги <a> могут не быть ссылками.)

Надеюсь, скоро мы сможем использовать &:any-link ( Что такое псевдокласс any-link для? ), но он пока не поддерживается браузерами

Answer 3

Это не возможно с вложенным синтаксисом для SASS. Из ссылки SASS :

Тогда внутреннее правило применяется только в селекторе внешнего правила.

Вложенные правила являются синтаксическим сахаром, который упрощает написание потомков-селекторов CSS , поскольку они являются одной из наиболее распространенных конструкций CSS. Хотя было бы неплохо использовать ваш подход для написания такого рода правил, это не то, для чего предназначен (или определен) синтаксис.