Як я можу визначити кольори як змінні у CSS?


216

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

Зауважте, що я не можу використовувати PHP для динамічної зміни файлу CSS.


Можливий дуб ... stackoverflow.com/questions/47487/…
Едді


Це може допомогти: stackoverflow.com/questions/15831657 / ...
DreamTeK

Відповіді:


225

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.


3
На всякий випадок, якщо хтось читає це і намагається змусити його працювати в Safari - підтримка CSS, здається, була видалена з Webkit навесні / влітку 2013 року. Bugs.webkit.org/show_bug.cgi?id=114119 list.webkit.org /pipermail/webkit-dev/2013-April/024476.html Досі працює в Chrome після ввімкнення зазначеного вище прапора.
Марі Фішер

Тестовано на chrome 36, не працює навіть із включеним прапором. Досі працює з firefox
yuvi

Щойно перевірив це за версією Chrome 49.0.2623.110 м, і він все ще не працює.
радуйте

Яка ваша ОС? Для мене це працювало: Версія 49.0.2623.110 (64-розрядна) на Mac OS X
Артур Веборг

Також працював над моїм Android версією Android Android 5.1.0 Chrome 49.0.2623.105
Артур Веборг

66

Люди продовжують оприлюднювати мою відповідь, але це жахливе рішення порівняно з радістю Сасс чи менше , особливо враховуючи кількість простих у користуванні 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

3
Додавання коментарів не спрацює в кількох випадках, як, наприклад, при використанні фільтрів IE. Я не можу тут помістити коментарі -> filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Картер Медлін

1
Захищений тому, що ти маєш рацію, це жахливе рішення.
AndroidDev

Я особисто віддав перевагу вашому клієнту стилю відповіді над рішеннями на стороні сервера, тому я щось зробив. Це не дивно, але це працює stackoverflow.com/a/44936706/4808079
Seph Reed

1
Ваша відповідь не приймається. Ви завжди можете її видалити, якщо вважаєте, що це жахливо.
TylerH

38

Сам CSS не використовує змінних. Однак ви можете використовувати іншу мову, як SASS, щоб визначити свій стиль за допомогою змінних, і автоматично створити файли CSS, які ви зможете розмістити в Інтернеті. Зауважте, що вам доведеться перезапускати генератор щоразу, коли ви вносите зміни до свого CSS, але це не так складно.


12
Я думаю, що відповідь ЗАРАЗ (2016) невірна, чи не так? Хоча я думаю, що все-таки може бути краще використовувати SASS або подібне.
codenoob

Використання CSS vars може бути кращим для SASS, оскільки кольори SASS можна змінювати лише статично. За допомогою CSS vars кольори можна змінювати під час виконання, тобто ви можете перейти в "темний режим" кнопкою за допомогою javascript.
Нік Екіпаж

24

Ви можете спробувати змінні CSS3 :

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

1
Примітка: Префікс властивості власності був варіований у попередній специфікації, але пізніше змінився на -. Firefox 31 і вище слідкуйте за новою специфікацією. (помилка 985838) developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
tgf

20

Немає простого CSS-рішення. Ви можете це зробити:

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

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

  • Нарешті, видаліть будь-які посилання кольорів у вашій CSS, крім новостворених класів кольорів.


1
Але що робити, якщо клієнт вирішить, що хоче зробити всі червоні елементи зеленими? Вам доведеться змінити клас "червоний", щоб надати "колір: зелений", який стає заплутаним і складним в обслуговуванні.
Singwolfboy

@singingwolfboy, я мав би бути більш конкретним у називанні класів. Найпростіше вказати, до яких елементів (ив) вони відносяться, щоб ви могли легко їх змінити в майбутньому.
Корі Баллу

8
@downvoters, це лише рішення CSS . Є багато альтернативних рішень, що стосуються сценаріїв або CLI, це для людей, які не мають наміру цього робити .
Corey Ballou

17

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

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

Але як їх оголосити ...

Це досить просто:

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

:root {
    --red: #ff0000; 
}

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

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

підтримка браузера

Також тут простий скрипт JavaScript, який змінює червоне значення на синє:

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

9

«Менше» Ruby Gem для CSS виглядає приголомшливо.

http://lesscss.org/


2
Я думаю, що краса МЕНШЕ полягає в тому, що це не Ruby чи якісь рамки. Це може бути "складено" на стороні клієнта або використовуватись з будь-якою іншою рамкою, як-от django-css github.com/dziegler/django-css або щось подібне
xster

9

Так, найближчим часом (я пишу це у червні 2012 р.) Ви можете визначити нативні змінні css, не використовуючи менше / sass тощо! Двигун Webkit щойно запровадив перші правила змінної css, тому передові версії Chrome і Safari вже працюють з ними. Перегляньте офіційний журнал розробок веб-веб-сайту (Chrome / Safari) з демонстраційною версією браузера css.

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


2
@Daniel Make that 2015
Still.Tony

4

Не використовуйте змінні css3 через підтримку.

Я б зробив наступне, якщо ви хочете отримати чисте рішення css.

  1. Використовуйте кольорові класи із семантичними назвами.

    .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, щоб змінити, якщо потрібно.


3

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


3

Мені не ясно, чому ви не можете використовувати PHP. Потім ви можете просто додати та використовувати змінні за своїм бажанням, зберегти файл у вигляді PHP-файлу та покласти на цей .php-файл як аркуш стилів замість .css-файлу.

Це не повинно бути PHP, але ви розумієте, що я маю на увазі.

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

Також перегляньте об'єктно-орієнтований CSS Ніколь Салліван .


Ми не можемо використовувати PHP, оскільки ця робота вимагає, щоб хтось із нас цього не робив!
хоріату

3

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 demo


Здається, цей інструмент більше не буде доступний у 2014 році
Даніель

3

Подумайте про використання SCSS. Він повністю сумісний із синтаксисом CSS, тому дійсний файл CSS також є дійсним SCSS-файлом. Це робить міграцію легкою, просто змініть суфікс. Він має численні вдосконалення, найбільш корисними є змінні та вкладені селектори.

Потрібно запустити його через попередній процесор, щоб перетворити його в CSS, перш ніж доставити його клієнту.

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


2

Якщо у вашій системі є 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 майже на будь-якій операційній системі, тому це має бути досить незалежно від платформи.

наприклад, обгортка: create_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 )

метод create_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


2

Впевнений, що завдяки прекрасному світу кількох класів може це зробити:

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

але я часто все-таки поєдную їх так:

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

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


1
Я додам: використовуйте різні та більш семантичні імена. Якщо кольори брендингу зміниться, ви будете переробляти багато HTML-коду. Використовуйте такі назви класів, як .primary, .secondary, .accent тощо.
Ерік Хармс


1

Якщо ви пишете файл css у вигляді шаблону xsl, ви можете прочитати значення кольорів із простого файлу xml. Потім створіть css за допомогою процесора xslt.

color.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

Це неможливо лише з CSS.

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

Найближчим з CSS ви можете скористатися селектором атрибутів підрядка таким чином:

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

і встановити idS всіх ваших елементів , які ви хочете бути відрегульовані з іменами , починаючи з colvar-, наприклад colvar-header. Потім при зміні кольору всі стилі ідентифікаторів оновлюються. Це настільки ж близько, як ви можете отримати лише з CSS.


Я це роблю лише з CSS, це зі змінними css, наприклад Mozilla
Arthur Weborg

це чудово, якщо всі ваші користувачі використовують мозілу - удачі з цим
user2317093

Працює з хромом, сафарі та оперою.
Артур Веборг

pmsl, що з витонченими виправленнями середньої школи в моїй посаді ОП? Це було не так вже й погано.
user2317093
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.