Объедините строки CSS в одну

Question

Я хочу определить некоторые основные стили, которые я могу комбинировать. Допустим, у меня есть таблица стилей, которая содержит следующие строки:

.whitebackground  {background-color: #ffffff}
.borderblue       {border: solid 1px #0000aa}

Мне интересно, есть ли способ включить эти строки в новую строку? Что-то вроде:

**div.main   {.whitebackground; .borderblue}**

Результат должен быть таким же, как и в этой строке:

div.main  {background-color: #ffffff; border: solid 1px #0000aa}

Answer 1

Вы ищете библиотеку SASS или LESS .

Они позволят вам включить объявление стиля от одного селектора к другому.

Используя LESS, ваш синтаксис будет совершенно корректным и будет работать так, как вы хотите

div.main   {
   .whitebackground; 
   .borderblue;
}

Но когда они скомпилированы, он автоматически примет оптимизированную форму.

Answer 2

Со стандартным CSS вы не можете.Тем не менее, вы можете дать вашему Div несколько классов.

<div class="whitebackground borderblue">

Это будет применять оба набора CSS к Div.

Кстати, если бы я был вЯ бы сказал, что такие педантичные настроения, как «whitebackground» и «borderblue», не очень хорошие названия классов.С такими классами вы также можете использовать встроенные стили.Предполагается, что имена классов передают значение, намерение, структуру, акцент и т. Д. Используйте такие имена, как «специальное замечание», «важный», «sidenote», «выделение» или любую другую причину, по которой у вас есть свой белый фон и синяя рамка.