Новый класс для использования других атрибутов класса

Question

Мне интересно, можно ли использовать @extend для использования свойств одного класса в другом. Например, если у меня есть два CSS файла, которые загружаются на одну и ту же страницу в следующем порядке:

<link rel="stylesheet" href="/css/one.css" media="screen">
<link rel="stylesheet" href="/css/two.css" media="screen">

, где один. css имеет класс:

.foo {
  color: red;
}

Могу ли я сделать что-то подобное в два. css:

.bar {
  @extend .foo;
}

Answer 1

Для достижения этих целей потребуется пре- или постпроцессор, или решение CSS -in- JS.

Вы можете рассмотреть:

1. БЭМ-подобный подход для каскадного обмена и отмены уникального.

.foo {
  color: black;
  background: yellow;
}

.bar {
  color: red;
}

.baz {
  color: blue;
}

<span class="foo">This is FOO</span>
<span class="foo bar">This is FOO + BAR</span>
<span class="foo baz">This is FOO + BAZ</span>

... или

a CSS Пользовательские свойства (также известные как CSS Variables) для более гибкого применения и переопределения.

:root {
  --main-color: black;
}

.foo {
  color: var(--main-color);
}

.bar {
  --main-color: red;
}

<span class="foo">This is FOO</span>
<span class="foo bar">This is FOO + BAR</span>

Answer 2

Сейчас у чистого CSS нет такого механизма, я знаю, что в Sass есть способ сделать это с помощью @extend. В некоторых случаях достаточно использовать селекторы, разделенные запятыми, например:

.foo,.bar{
  font-size:40px;
}
.bar{
  color:red;
}

в этом примере. Вы делаете общую часть для селекторов .foo и .bar и добавляете цвет: красный только для .bar