Можно ли создать правило CSS, которое объединяет два или более других правил CSS?

Question

Например:

.strong {
        font-weight: bold;
}
.italicized {
        font-style: italic;
}
.strong_and_italicized {
        .strong;
        .italicized;
}

Я спрашиваю, потому что я работаю над некоторым jquery, который манипулирует некоторыми объектами DOM, которым назначено несколько разных классов из css-файла jquery ui theme. Мне кажется, было бы намного проще объединить несколько классов в один класс, и тогда я мог бы просто ссылаться на этот класс в коде javascript при попытке выбрать объект DOM.

Answer 1

Единственный способ объединить CSS-классы в один подобный мне, о котором я знаю, - это использовать препроцессор CSS, такой как LESS или SASS .

Если вы не хотите использовать это, я боюсь, что вы должны назначить оба класса отдельно.

Answer 2

При использовании чистого CSS невозможно объединить два других существующих правила.

Если вам нужно объединить два правила CSS, просто используйте оба класса для элемента:

.foo {
  color: #F00;
}
.bar {
  font-size: 10px;
}

<div class="foo bar"></div>

С помощью CSS вы можете цепочка селекторов:

.foo.bar {
  color: #0F0;
  font-size: 10px;
}

И jQuery также будет выбирать элементы со связанными классами:

$('.foo.bar').do(stuff);

---

Кроме того, никогда не пишите классы, которые подразумевают стиль. Это не семантическое и усложняет задачу, когда вы хотите повторно использовать свой HTML, но изменить свой CSS.

Что-то вроде:

.italicized {
  font-weight: bold;
}

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

.title {
  font-style: italic;
}

не имеет значения для стиля.

Answer 3

Вы можете сделать именно это с Меньше CSS .Он даже использует синтаксис в вашем примере.