Как определить цвета в качестве переменных в CSS?

Question

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

Обратите внимание, что я не могу использовать PHP для динамического изменения CSS-файла.

Answer 1

Сам CSS не использует переменные. Тем не менее, вы можете использовать другой язык, например SASS, для определения стиля с использованием переменных и автоматического создания файлов CSS, которые затем можно разместить в Интернете. Обратите внимание, что вам придется повторно запускать генератор при каждом изменении вашего CSS, но это не так сложно.

Answer 2

Нет простого решения CSS. Вы можете сделать это:

• Найти все экземпляры background-color и color в файле CSS и создать имя класса для каждого уникального цвета.

  .top-header { color: #fff; } 
  .content-text { color: #f00; } 
  .bg-leftnav { background-color: #fff; } 
  .bg-column { background-color: #f00; } 
  

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

• Наконец, удалите любые ссылки на цвета в CSS, кроме только что созданных классов цвета.

Answer 3

Не PHP Я боюсь, но Zope и Plone использовать что-то похожее на SASS под названием DTML для достижения этой цели. Это невероятно полезно в CMS.

У Upfront Systems есть good example его использования в Plone.

Answer 4

«Меньше» Ruby Gem для CSS выглядит потрясающе.

http://lesscss.org/

Answer 5

Вы можете пройти CSS через яваскрипт и заменить все экземпляры ЦВЕТ1 с определенным цветом (в основном регулярное выражение его) и обеспечить резервную таблицу стилей, упаковывают конечный пользователь JS отключен

Answer 6

Я m не понятно, почему вы не можете использовать PHP. Затем вы можете просто добавлять и использовать переменные по своему усмотрению, сохранять файл как файл PHP и ссылаться на этот .php-файл как таблицу стилей вместо файла .css.

Это не должен быть PHP, но вы понимаете, что я имею в виду.

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

Кроме того, ознакомьтесь с номером Nicole Sullivan's Object-oriented CSS.

Answer 7

Люди держат upvoting мой ответ, но это страшное решение по сравнению с радостью sass или less, особенно учитывая количество простых в использовании gui's for both в эти дни. Если у вас есть смысл игнорировать все, что я предлагаю ниже.

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

В верхней части файл 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 

Answer 8

Если у вас есть Рубин на вашей системе вы можете сделать это:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

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

Вы можете использовать этот метод, независимо от Rails, написав небольшой скрипт на Ruby-оболочки , который работает совместно с site_settings.rb и принимает ваши CSS-пути во внимание, и , которые вы можете позвонить каждый раз, когда вы хотите повторно -генерировать свой CSS (например, при запуске сайта)

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

например. обертка: generate_CSS.rb (запустить этот сценарий всякий раз, когда вам нужно создать свой 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 

Answer 9

dicejs.com (formally 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 demo

Answer 10

Да, в ближайшее время (я пишу это в июне 2012 года) вы можете определить родной CSS переменные, без использования less/sass и т. д.! Механизм Webkit только что реализовал первые правила переменной css, поэтому самые современные версии Chrome и Safari уже работают с ними. См. Official Webkit (Chrome/Safari) development log с демонстрацией браузера на сайте css.

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

Answer 11

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

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

Я уже много лет являюсь разработчиком CSS-хардкора, но, поскольку я заставляю себя делать проект в SCSS, теперь я больше ничего не буду использовать.

Answer 12

Вы можете попробовать CSS3 variables:

body { 
    --fontColor: red; 
    color: var(--fontColor); 
} 

Answer 13

Вы можете селекторы группы:

#selector1, #selector2, #selector3 { color: black; } 

Answer 14

CSS поддерживает это изначально с CSS Variables.

Пример CSS файл

:root { 
    --main-color:#06c; 
} 

#foo { 
    color: var(--main-color); 
} 

Для рабочего примера см this 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 переменные.

Answer 15

Это невозможно с помощью CSS.

Вы можете сделать это с помощью JavaScript и LESS, используя less.js, что сделает LESS переменные в CSS в реальном времени, но оно предназначено только для разработки и добавляет слишком много накладных расходов для реального использования.

Ближайший вы можете прийти с помощью CSS является использование attribute substring selector так:

[id*="colvar-"] { 
    color: #f0c69b; 
} 

и установить id S всех ваших элементов, которые вы хотите быть отрегулированы с именами, начиная с colvar-, таких как colvar-header , Затем, когда вы меняете цвет, все стили идентификатора обновляются. Это как можно ближе к CSS.

Answer 16

Если вы пишете файл 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

стилей.CSS:

body { 
    background-color: #ccc; 
} 

Answer 17

Конечно может, своего рода, благодаря удивительному миру нескольких классов, можно сделать следующее:

.red {color:red} 
.blackBack {background-color: black} 

, но я часто в конечном итоге объединить их в любом случае, как это:

.highlight {color:red, background-color: black} 

Я знаю, что семантическая полиция будет на вас, но она работает.

Answer 18

Не используйте переменные css3 из-за поддержки.

Я бы сделал следующее, если вы хотите чистое решение css.

1. Использования цветовых классов с semenatic имен.

   .bg-primary { background: #880000; } 
   
   .bg-secondary { background: #008800; } 
   
   .bg-accent { background: #F5F5F5; } 
   

2. Отдельная структура из кожи (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 */ 
   

3. Поместите их в отдельный файл CSS, чтобы изменить при необходимости.