Могу ли я включить определение CSS в другое определение CSS?

Question

Итак, допустим, у меня есть следующее в 'foo.css':

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Теперь предположим, что у меня есть два элемента div, для которых мне нужны границы, поэтому я делаю:

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

Это прекрасно работает, но я обнаружил, что при определении #foo и #bar в моем файле css я предпочел бы дать им характеристики .border, чем дать классу div, например:

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

и тогда мой HTML будет просто:

<div id="foo">Foo</div>
<div id="bar">Bar</div>

Кто-нибудь знает, что это за магическое заклинание?

Answer 1

Это не поддерживается css. Лучшее, что вы можете сделать, это что-то вроде:

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Answer 2

Вас могут заинтересовать mixins с Sass . Sass позволяет вам более эффективно писать таблицы стилей CSS, используя такие приемы. Миксины позволяют определить группу атрибутов (скажем, для работы с границами), а затем включить эти атрибуты в определенные классы CSS.

Answer 3

Если вы хотите продвинуть свой CSS дальше, вместо того, чтобы использовать некоторые приемы, описанные в предыдущих постах, вам следует заглянуть в CSS Compilers. Они берут написанный вами CSS-подобный код, обычно CSS с несколькими добавленными трюками, и превращают их в обычный CSS для Интернета.

Дэвид Зиглер написал о некоторых классных предложениях CSS-компиляторов:

• Переменные - Хорошие программисты не любят жёсткий код. Во многих случаях вы можете избежать этого в CSS, используя хорошее наследование, но иногда это неизбежно. С переменными изменение вашей цветовой схемы означает обновление одной переменной вместо 13 атрибутов.

• Математика - Это идет рука об руку с переменными. Скажем, ваш левый столбец равен 100px, ваш правый столбец - 500px, а ваш div обертки - 600px. Ну, может быть, вы решите изменить его на 960 пикселей. Разве это не было бы здорово, если бы ширина ваших колонок регулировалась автоматически? Ответ - да.

• Вложенные стили - Это, наверное, самое важное. CSS плоский, что означает, что сложные сайты в конечном итоге с CSS, что трудно пройти.

Вы можете прочитать о популярных компиляторах в его блоге на эту тему или выполнить поиск и найти тот, который лучше всего подходит для вас.

Answer 4

Как сказал Wsanville, вы не можете использовать класс. Но нормальное наследование CSS работает - скажем, если ваш HTML был

<div class="border">
    <div id="foo">
       hello
    </div>
    <div id="bar">
       world
    </div>
</div>

Вы могли бы сказать

.border {border: 1px solid #f00;}
#foo {border:inherit;}

Что в некоторых случаях может быть достаточно хорошим