Селекторы псевдоклассов с одинаковыми значениями
Я использую псевдоселекторы для классов при наведении курсора и активных классов. В этом случае цвет для наведения и активного будет одинаковым. Это можно сделать так:
a {
color: #0090B2;
&:hover {
color: #FF7A00;
}
&.active {
color: #FF7A00;
}
}
но я бы не хотел повторять одни и те же атрибуты, я ищу что-то вроде этого, конечно, это не работает, но вы понимаете, что я хочу сделать. Как правильно это сделать? Мне просто использовать миксин?
a {
color: #0090B2;
&:hover, &.active {
color: #FF7A00;
}
}
Вы имели в виду a:active (а не a.active)? a.active - это не псевдокласс. В любом случае, в CSS sel1, sel2 { rules } в точности эквивалентен sel1 { rules } ; sel2 { rules }, поэтому какая бы проблема у вас ни возникала, это не использование одного правила для двух разных селекторов.
Вы сказали: «[...] конечно, это не работает ...», но это работает. В чем проблема с этим кодом? Я не понимаю, извините.
Ответы 1
Опция 1
Я не понимаю, что у тебя не так, у меня это работает:
a {
color: #0090B2;
&:hover, &.active {
color: #FF7A00;
}
}
Что даст вам:
a {
color: #00acc1;
}
a:hover, a.active {
color: #0f9d58;
}
Вариант 2
a {
color : #00acc1;;
&:hover {
@extend %active_link;
}
&.active {
@extend %active_link;
}
}
%active_link {
color: #0f9d58;
}
Те же результаты, что и раньше. Но здесь вы можете делать что-то вроде:
a {
color : #00acc1;;
&:hover {
@extend %active_link;
content: "AAA";
}
&.active {
@extend %active_link;
content: "BBB";
}
}
%active_link {
color: #0f9d58;
}
и получить:
a {
color: #00acc1;
}
a:hover {
content: "AAA";
}
a.active {
content: "BBB";
}
a:hover, a.active {
color: #0f9d58;
}
Мне нужен такой результат: {color: # 0090B2; } a: hover {цвет: # FF7A00; } a.active {цвет: # FF7A00; }