Создайте переменную в файле .CSS для использования в этом файле .CSS [дубликат]

https://stackoverflow.com/questions/47487

09-06-2019
|

Вопрос

Возможный дубликат:
Как избежать повторяющихся констант в CSS

У нас есть несколько «цветов темы», которые повторно используются в нашей таблице CSS.

Есть ли способ установить переменную, а затем повторно использовать ее?

Например.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}

Решение

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

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

Таким образом, вы избегаете повторения стилей, которые концептуально то же самое, а также поясняет, какие части документа они затрагивают.

Обратите внимание на акцент на «концептуально» в последнем предложении...Это только что появилось в комментариях, поэтому я собираюсь немного расширить эту тему, поскольку я видел, как люди совершали одну и ту же ошибку снова и снова в течение многих лет - еще до появления CSS: два атрибута, имеющие одно и то же значение, не обязательно означают, что они представляют одно и то же концепция.Небо может показаться вечером красным, как и помидоры, но небо и помидор не красные по той же причине, а их цвета воля изменяются во времени независимо.Точно так же, если в вашей таблице стилей есть два элемента, которым присвоен один и тот же цвет, размер или расположение, это не означает, что они будут всегда разделять эти ценности.Наивный дизайнер, который использует группировку (как описано здесь) или процессор переменных, такой как SASS или LESS, чтобы избежать ценить повторение рискует сделать будущие изменения стиля невероятно подверженными ошибкам;всегда сосредотачивайтесь на контекстуальное значение стилей, стремясь уменьшить повторение, игнорируя их текущие значения.

Другие советы

Вы можете достичь этого и многого другого, используя Меньше CSS.

Нет, но Сасс Означает ли это.Это препроцессор CSS, позволяющий использовать множество ярлыков для уменьшения объема кода CSS, который вам нужно написать.

Например:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

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

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Есть больше:миксины, которые действуют как функции, и возможность наследовать один селектор от другого.Это очень умно и очень полезно.

Если вы пишете код на Ruby on Rails, он даже автоматически скомпилирует его в CSS, но есть также компилятор общего назначения, который может сделать это за вас по требованию.

Вы не первый, кто задается вопросом, и ответ — нет.У Эллиотта есть хорошая напыщенная речь по этому поводу: http://cafe.elharo.com/web/css-repeats-itself/.Вы можете использовать JSP или его эквивалент для генерации CSS во время выполнения.

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

На данный момент это не поддерживается, если вы не используете какой-либо скрипт для создания CSS на основе определенных вами переменных.

Однако кажется, что по крайней мере некоторые люди из мира браузеров работаю над этим.Итак, если когда-нибудь в будущем это действительно станет стандартом, нам придется подождать, пока оно будет реализовано во всех браузерах (до тех пор оно будет непригодным для использования).

Поскольку в CSS этого нет (пока я верю, что в следующей версии он будет), следуйте советам Конрада Рудольфа по предварительной обработке.Вероятно, вы захотите использовать тот, который уже существует:м4

http://www.gnu.org/software/m4/m4.html

Вы все слишком усложняете.Вот почему существует каскад.Просто укажите селекторы элементов и классифицируйте свой цвет:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Затем примените его к элементам HTML, переопределив, когда вам нужно использовать цвета темы.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

Я написал макрос (в Visual Studio), который позволяет мне не только кодировать CSS для именованных цветов, но и легко рассчитывать оттенки или сочетания этих цветов.Он также обрабатывает шрифты.Он срабатывает при сохранении и выводит отдельную версию файла CSS.Это соответствует Аргумент Берта Боса что любая обработка символов в CSS происходит на этапе создания, а не на этапе интерпретации.

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

Цели этого подхода заключаются в следующем:

Разрешить базовые цвета, шрифты и т. д.определяться в центральном месте, чтобы всю палитру или типографскую обработку можно было легко настроить без необходимости использования поиска/замены
Избегайте необходимости сопоставления расширения .CSS в IIS.
Создавайте разнообразные текстовые CSS-файлы, которые можно использовать, например, в режиме дизайна VisualStudio.
Создавайте эти файлы один раз во время разработки, а не пересчитывайте их каждый раз, когда запрашивается файл CSS.
Создавайте эти файлы мгновенно и прозрачно, не добавляя дополнительных шагов в рабочий процесс «настройка-сохранение-тест».

При таком подходе цвета, оттенки цветов и семейства шрифтов представляются сокращенными токенами, которые ссылаются на список значений в XML-файле.

XML-файл, содержащий определения цвета и шрифта, должен называться Constants.xml и находиться в той же папке, что и файлы CSS.

Метод ProcessCSS запускается EnvironmentEvents всякий раз, когда VisualStudio сохраняет файл CSS.Файл CSS развернут, а расширенная статическая версия файла сохраняется в папке /css/static/.(Все HTML-страницы должны ссылаться на версии /css/static/ файлов CSS).

Файл Constants.xml может выглядеть примерно так:

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

В файле CSS вы можете иметь такие определения, как:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Смотрите также Как избежать повторяющихся констант в CSS.Как сказал Фаринья, было сделано предложение по переменным CSS, но на данный момент вы хотите использовать препроцессор.

В атрибуте class элемента HTML можно использовать несколько классов, каждый из которых обеспечивает часть стиля.Итак, вы можете определить свой CSS как:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

а затем объедините классы по мере необходимости:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

Это позволяет вам повторно использовать класс OurColor без необходимости многократного определения цвета в CSS.Если вы измените тему, просто измените правило для нашего цвета.

Это может звучать как безумие, но если вы используете NAnt (или Ant, или какую-либо другую систему автоматической сборки), вы можете хакерским способом использовать свойства NAnt в качестве переменных CSS.Начните с файла шаблона CSS (возможно,styles.css.template или что-то в этом роде), содержащего что-то вроде этого:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

А затем добавьте в свою сборку шаг, который назначает все значения свойств (я использую внешние файлы сборки и <include> их) и использует фильтр <expandproperties> для генерации фактического CSS:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

Обратной стороной, конечно, является то, что вам нужно запустить цель генерации CSS, прежде чем вы сможете проверить, как она выглядит в браузере.И это, вероятно, ограничит вас генерацией всего CSS вручную.

Однако вы можете писать функции NAnt, чтобы делать массу интересных вещей, помимо простого расширения свойств (например, динамическую генерацию файлов градиентных изображений), так что для меня это стоило головной боли.

CSS (пока) не использует переменные, что понятно для его возраста и того, что он является декларативным языком.

Вот два основных подхода для достижения более динамичной обработки стилей:

Серверные переменные во встроенном CSS
Пример (с использованием PHP):

<style> .myclass{color:<?php echo $color; ?>;} </style>

Манипулирование DOM с помощью JavaScript для изменения CSS на стороне клиента
Примеры (с использованием библиотеки jQuery):

$('.myclass').css('color', 'blue');

ИЛИ

//The jsvarColor could be set with the original page response javascript // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow