it-swarm.com.ru

Как я могу определить цвета как переменные в CSS?

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

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

187
patrick

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.

186
Arthur Weborg

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

Вы можете поместить комментарий в 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
66
wheresrhys

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

40
singingwolfboy

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

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

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

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

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
    
  • Затем перейдите на каждую страницу вашего сайта, где был задействован цвет, и добавьте соответствующие классы для цвета и фона.

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

19
Corey Ballou

Gem для CSS "Less" Rubyвыглядит потрясающе.

http://lesscss.org/

8
Erin

Да, в ближайшем будущем (я пишу это в июне 2012 года) вы можете определить собственные переменные css, не используя less/sass и т.д.! Движок Webkit только что реализовал первые правила для переменных css, так что уже работающие с ними Edge-версии Chrome и ​​Safari уже работают. Смотрите Официальный журнал разработки Webkit (Chrome/Safari) с демонстрацией браузера cs на месте.

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

8
Sliq

Yeeeaaahhh .... теперь вы можете использовать var () функцию в CSS .. ...

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

Но как их объявить ...

Все довольно просто:

Например, вы хотите назначить #ff0000 для var(), просто назначьте его в :root, также обратите внимание на --:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

Хорошая вещь заключается в том, что поддержка браузера неплоха, также не нужно компилировать ее для использования в браузере, например LESS или SASS...

browser support

Кроме того, вот простой скрипт JavaScript, который меняет значение красного на синий:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
5
Alireza

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

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

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

Кроме того, проверьте Николь Салливан Объектно-ориентированный CSS .

3
stephenhay

dicejs.com (формально cssobjs) - это версия SASS на стороне клиента. Вы можете установить переменные в своем CSS (хранящемся в CSS в формате json) и повторно использовать переменные цвета.

//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

2
John David Five

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

2
Arcath

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

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

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

2
superluminary

Не используйте переменные 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, чтобы изменить при необходимости.

2
Eric Harms

Вы можете группировать селекторы:

#selector1, #selector2, #selector3 { color: black; }
1
Botond Vajna

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

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

но я часто в конечном итоге объединяю их так:

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

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

1
Chalky

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

Upfront Systems имеет хороший пример его использования в Plone.

1
Jon Hadley

Если у вас есть Ruby в вашей системе, вы можете сделать это:

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
1
Tilo

Если вы напишите файл 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;
}
0
Cole Tierney