Включить стиль одного класса CSS в другой

Question

Можно ли включить стили одного класса 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-tricks Web, но здесь все очень запутанным это не работает должным образом. myclass2 должен указать myclass1 в соответствии со статьей. Тем не менее, это дает странный результат. Я направляюсь в правильном направлении? или статья неправильная?

Update: Вопрос только о фактической концепции позади @extend Саас, и в том числе другого класса CSS к другому, а в чем разница?

Answer 1

CSS без предварительных процессоров (SASS, LESS и т.д.):

.myclass1{ 
 
\t background:red; 
 
} 
 

 
.myclass2{ 
 
\t 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>

Вы можете добавить несколько классов к одному элементу.

Answer 2

SASS - препроцессор CSS, который в основном означает, что синтаксис SASS скомпилирован в простой CSS. Функции, которые SASS предлагает такие как @extend, а также создание переменных с $ синтаксиса и т.д. возможно только с помощью SASS (не возможна с CSS3)

Это, как говорится, вы могли бы достичь результата @extend функции ШАОН в обычных CSS просто приковав классы вместе:

.blue, .green { 
<your css here> 
} 

Answer 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>