Im работает над файлом CSS, который довольно длинный. Я знаю, что клиент может запросить изменения в цветовой схеме и задавался вопросом: можно ли назначать цвета для переменных, чтобы я мог просто изменить переменную, чтобы новый цвет применялся ко всем элементам, которые его используют?
Обратите внимание, что я не могу использовать PHP для динамического изменения файла CSS.
CSS поддерживает это с помощью Переменные CSS.
Пример файла CSS
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
Для рабочего примера см. этот JSFiddle (пример показывает, что один из селекторов CSS в скрипке имеет цвет, жестко закодированный до синего, другой селектор CSS использует переменные CSS, как исходный, так и текущий синтаксис, чтобы установить цвет в синий цвет.)
Манипуляция переменной CSS в JavaScript/стороне клиента
document.body.style.setProperty('--main-color',"#6c0")
Поддержка во всех современных браузерах
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+ и Opera 36+ поставляются с встроенной поддержкой переменных CSS.
Люди продолжают отстаивать мой ответ, но это ужасное решение по сравнению с радостью sass или less, особенно учитывая количество простых в использовании gui для обоих в эти дни, Если у вас есть смысл игнорировать все, что я предлагаю ниже.
Вы можете поместить комментарий в css перед каждым цветом, чтобы служить в качестве своего рода переменной, которую вы можете изменить значение использования find/replace, поэтому...
В верхней части файла css
/********************* Colour reference chart****************
*************************** comment ********* colour ********
box background colour bbg #567890
box border colour bb #abcdef
box text colour bt #123456
*/
Позже в файле CSS
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}
Затем, чтобы, например, изменить цветовую схему для текстового текста, который вы набираете/заменяете на
/*bt*/#123456
Сам CSS не использует переменные. Однако вы можете использовать другой язык, например SASS, чтобы определить свой стиль с использованием переменных и автоматически создавать файлы CSS, которые затем можно паутина. Обратите внимание, что вам придется повторно запускать генератор при каждом изменении вашего CSS, но это не так сложно.
Нет простого решения CSS. Вы можете сделать это:
Найти все экземпляры background-color и color в вашем файле CSS и создать имя класса для каждого уникального цвета.
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
Далее пройдите через каждую страницу вашего сайта, где был задействован цвет, и добавьте соответствующие классы для цвета и цвета фона.
Наконец, удалите любые ссылки на цвета в CSS, кроме новых созданных классов цветов.
Вы можете попробовать переменные CSS3:
body {
var-fontColor: red;
color: var(fontColor);
}
"Меньше" Ruby Gem для CSS выглядит потрясающе.
Да, в ближайшем будущем (я пишу это в июне 2012 года) вы можете определить собственные переменные css, не используя less/sass и т.д.! Механизм Webkit только что реализовал первые правила переменной css, поэтому самые современные версии Chrome и Safari уже работают с ними. См. Официальный веб-сайт (Chrome/Safari) журнал разработки с демонстрацией браузера на сайте css.
Мы надеемся, что в ближайшие несколько месяцев мы сможем ожидать поддержки браузером родных переменных css.
Я не понимаю, почему вы не можете использовать PHP. Затем вы можете просто добавлять и использовать переменные по своему усмотрению, сохранять файл как файл PHP и ссылаться на этот .php файл в качестве таблицы стилей вместо файла .css.
Это не должен быть PHP, но вы понимаете, что я имею в виду.
Когда мы хотим программировать, почему бы не использовать язык программирования, пока CSS (возможно) не поддерживает такие переменные?
Кроме того, ознакомьтесь с Nicole Sullivan Объектно-ориентированный CSS.
Вы можете передать CSS через javascript и заменить все экземпляры COLOUR1 на определенный цвет (в основном, его регулярное выражение) и предоставить таблицу стилей резервного копирования, если конечный пользователь отключил JS
dicejs.com(формально cssobjs) является клиентской версией SASS. Вы можете установить переменные в свой CSS (хранящиеся в json-форматированном CSS) и повторно использовать ваши цветовые переменные.
//create the CSS JSON object with variables and styles
var myCSSObjs = {
cssVariables : {
primaryColor:'#FF0000',
padSmall:'5px',
padLarge:'$expr($padSmall * 2)'
}
'body' : {padding:'$padLarge'},
'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
'.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};
//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();
И вот ссылка на полную загружаемую демо, которая немного более полезна, чем их документация: демо-версия dicejs
Рассмотрим использование SCSS. Он полностью совместим с синтаксисом CSS, поэтому действительный файл CSS также является допустимым файлом SCSS. Это облегчает миграцию, просто измените суффикс. Он имеет множество улучшений, наиболее полезных переменных и вложенных селекторов.
Вам нужно запустить его через предварительный процессор, чтобы преобразовать его в CSS, прежде чем отправлять его клиенту.
Я уже много лет являюсь разработчиком CSS, но, поскольку я заставляю себя делать проект в SCSS, теперь я больше ничего не буду использовать.
Не PHP. Я боюсь, но Zope и Plone используют что-то похожее на SASS, называемое DTML, чтобы достичь этого. Это невероятно полезно в CMS.
Upfront Systems имеет хороший пример его использования в Plone.
Если у вас есть Ruby в вашей системе, вы можете сделать это:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
Это было сделано для Rails, но см. ниже, как изменить его, чтобы запустить его отдельно.
Вы можете использовать этот метод независимо от Rails, написав небольшую оболочку Ruby script который работает совместно с site_settings.rb и учитывает ваши CSS-пути, и которые вы можете вызывать каждый раз, когда хотите перегенерировать свой CSS (например, во время запуска сайта).
Вы можете запустить Ruby практически в любой операционной системе, поэтому это должно быть достаточно независимым от платформы.
например. wrapper: generate_CSS.rb (запустите этот script всякий раз, когда вам нужно сгенерировать свой CSS)
#/usr/bin/ruby # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level
CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )
Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )
метод generate_CSS_files в site_settings.rb необходимо изменить следующим образом:
module Site
# ... see above link for complete contents
# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))
# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"
out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while line =~ /#(\w+)#/ do # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files
end # module Site
Вы можете группировать селектора:
#selector1, #selector2, #selector3 { color: black; }
Если вы пишете файл css в качестве шаблона xsl, вы можете прочитать значения цвета из простого XML файла. Затем создайте css с процессором xslt.
colors.xml:
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>
styles.xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
<xsl:template match="/">body {
background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>
Команда для рендеринга css: xsltproc -o styles.css styles.xsl colors.xml
styles.css:
body {
background-color: #ccc;
}
Конечно, может, из-за чудесного мира нескольких классов, может это сделать:
.red {color:red}
.blackBack {background-color: black}
но я часто в конечном итоге объединяю их так:
.highlight {color:red, background-color: black}
Я знаю, что семантическая полиция будет на вас, но она работает.
Не используйте переменные css3 из-за поддержки.
Я бы сделал следующее, если вы хотите получить чистое решение css.
Используйте классы цветов с именами semenatic.
.bg-primary { background: #880000; }
.bg-secondary { background: #008800; }
.bg-accent { background: #F5F5F5; }
Отделить структуру от скина (OOCSS)
/* Instead of */
h1 {
font-size: 2rem;
line-height: 1.5rem;
color: #8000;
}
/* use this */
h1 {
font-size: 2rem;
line-height: 1.5rem;
}
.bg-primary {
background: #880000;
}
/* This will allow you to reuse colors in your design */
Поместите их внутри отдельного файла css для изменения по мере необходимости.
Невозможно использовать только CSS.
Вы можете сделать это с помощью JavaScript и LESS, используя меньше. js, который будет предоставлять LESS-переменные в CSS в реальном времени, но только для разработки и добавляет слишком много накладных расходов для реального использования.
Ближе всего вы можете использовать CSS, чтобы использовать селектор подстроки атрибутов следующим образом:
[id*="colvar-"] {
color: #f0c69b;
}
и установите id всех ваших элементов, которые вы хотите настроить, с именами, начинающимися с colvar-, например colvar-header. Затем, когда вы меняете цвет, все стили идентификатора обновляются. Это как можно ближе к CSS.