Вопрос:
Можно ли включить стили одного класса css в другой? Я имею в виду, что SASS @extends в значительной степени делает аналогичную вещь, но также стильный расширенный класс, что не требуется. См. Пример:
<style> .myclass1{ background:red; } .myclass2{ color:blue; @extend .myclass1; } </style> <div> <p class=»myclass2″>Hello i am class 2, my text is blue and background is red</p> </div> <div> <p class=»myclass1″>Hello i am class 1, my text should not blue and my background is red</p> </div>
Отмеченный пример вдохновлен статьей CSS-трюков Web, но здесь все очень запутанно, что он не работает должным образом. myclass2 должен предоставить myclass1 в соответствии со статьей. Тем не менее, это дает странный результат. Я направляюсь в правильном направлении? или статья неправильная?
Обновление: вопрос касается только фактической концепции @extend SAAS и включения другого класса CSS в другой, и в чем разница?
Ответ №1
CSS без предварительных процессоров (SASS, LESS и т.д.):
.myclass1{ background:red; } .myclass2{ color:blue; }<div> <p class=»myclass1 myclass2″>Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p> </div> <div> <p class=»myclass1″>Hello, I am only of class 1 (my background is red)</p> </div>
Вы можете добавить несколько классов в один и тот же элемент.
Ответ №2
SASS – препроцессор CSS, который в основном означает, что синтаксис SASS компилируется в простой CSS. Функции, которые предлагает SASS, такие как @extend а также установление переменных с синтаксисом $ и т.д., Возможны только при использовании SASS (невозможно с CSS3)
При этом вы сможете выполнить результат функции @extend SASS в обычном CSS, просто объединив классы:
.blue, .green { <your css here> } Ответ №3
Вы можете использовать запятую для соответствия нескольким селекторам:
.myclass1, .myclass2 { background: red; } .myclass2 { color: blue; }<p class=»myclass2″>Hello i am class 2, my text is blue and background is red</p> <p class=»myclass1″>Hello i am class 1, my text should not blue and my background is red</p>
