How can I define colors as variables in CSS

Question

I   m working on a CSS file that is quite long  I know that the client could ask for changes to the color scheme  and was wondering  is it possible to assign colors to variables  so that I can just change a variable to have the new color applied to all elements that use it   Please note that I can   t use PHP to dynamically change the CSS file

User · Answer

If you write the css file as an xsl template, you could read color values from a simple xml file. Then create the css with an xslt processor.

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>

Command to render css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

User · Answer

Not PHP I m afraid  but Zope and Plone use something similar to SASS called DTML to achieve this  It s incredibly useful in CMS s   Upfront Systems has a good example of its use in Plone

User · Answer

I m not clear on why you can t use PHP  You could then simply add and use variables as you wish  save the file as a PHP file and link to that  php file as the style sheet instead of the  css file   It doesn t have to be PHP  but you get what I mean   When we want programming stuff  why not use a programming language until CSS  maybe  supports things like variables   Also  check out Nicole Sullivan s Object-oriented CSS

User · Answer

You can try CSS3 variables   body     --fontColor  red    color  var --fontColor

User · Answer

It   s not possible with CSS alone   You can do it with JavaScript and LESS using less js  which will render LESS variables into CSS live  but it   s for development only and adds too much overhead for real-life use   The closest you can come with CSS is to use an attribute substring selector like this    id   colvar-         color   f0c69b      and set the ids of all your elements that you want to be adjusted to names starting with colvar-  such as colvar-header  Then when you change the color  all the ID styles are updated  That   s as close as you can get with CSS alone

User · Answer

Sure can  sort of  thanks to the wonderful world of multiple classes  can do this    red  color red   blackBack  background-color  black    but I often end up combining them anyway like this    highlight  color red  background-color  black    I know the semantic police will be all over you  but it works

User · Answer

dicejs com  formally cssobjs  is a client-side version of SASS  You can set variables in your CSS  stored in json formatted CSS  and re-use your color variables     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      And here is a link to a complete downloadable demo which is a little more helpful then their documentation   dicejs demo

User · Answer

People keep upvoting my answer  but it s a terrible solution compared to the joy of sass or less  particularly given the number of easy to use gui s for both these days  If you have any sense ignore everything I suggest below   You could put a comment in the css before each colour in order to serve as a sort of variable  which you can change the value of using find replace  so     At the top of the css file                         Colour reference chart                                             comment           colour            box background colour       bbg               567890 box border colour           bb                abcdef box text colour             bt                123456       Later in the CSS file   contentBox  background    bbg   567890  border  2px solid   bb   abcdef  color   bt   123456    Then to  for example  change the colour scheme for the box text you do a find replace on     bt   123456

User · Answer

The  Less  Ruby Gem for CSS looks awesome    http   lesscss org

User · Answer

You can group selectors    selector1   selector2   selector3   color  black

User · Answer

Consider using SCSS  It s full compatible with CSS syntax  so a valid CSS file is also a valid SCSS file  This makes migration easy  just change the suffix  It has numerous enhancements  the most useful being variables and nested selectors   You need to run it through a pre-processor to convert it to CSS before shipping it to the client    I ve been a hardcore CSS developer for many years now  but since forcing myself to do a project in SCSS  I now won t use anything else

User · Answer

CSS itself doesn t use variables  However  you can use another language like SASS to define your styling using variables  and automatically produce CSS files  which you can then put up on the web  Note that you would have to re-run the generator every time you made a change to your CSS  but that isn t so hard

User · Answer

Yeeeaaahhh     you can now use var   function in CSS       The good news is you can change it using JavaScript access  which will change globally as well      But how to declare them     It s quite simple   For example  you wanna assign a  ff0000 to a var    just simply assign it in  root  also pay attention to --    root       --red   ff0000      html  body       background-color  var --red        The good things are the browser support is not bad  also don t need to be compiled to be used in the browser like LESS or SASS       Also  here is a simple JavaScript script  which changes the red value to blue   const rootEl   document querySelector   root    root style setProperty  --red    blue

User · Answer

You could pass the CSS through javascript and replace all instances of COLOUR1 with a certain color  basically regex it  and provide a backup stylesheet incase the end user has JS turned off

User · Answer

CSS supports this natively with CSS Variables   Example CSS file   root       --main-color  06c      foo       color  var --main-color       For a working example  please see this JSFiddle  the example shows one of the CSS selectors in the fiddle has the color hard coded to blue  the other CSS selector uses CSS variables  both original and current syntax  to set the color to blue    Manipulating a CSS variable in JavaScript client side  document body style setProperty  --main-color    6c0     Support is in all the modern browsers  Firefox 31   Chrome 49   Safari 9 1   Microsoft Edge 15  and Opera 36  ship with native support for CSS variables

User · Answer

If you have Ruby on your system you can do this   http   unixgods org  tilo Ruby Using Variables in CSS Files with Ruby on Rails html  This was made for Rails  but see below for how to modify it to run it stand alone   You could use this method independently from Rails  by writing a small Ruby wrapper script  which works in conjunction with site settings rb and takes your CSS-paths into account  and  which you can call every time you want to re-generate your CSS  e g  during site startup   You can run Ruby on pretty much any operating system  so this should be fairly platform independent   e g  wrapper   generate CSS rb   run this script whenever you need to generate your 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     the generate CSS files method in site settings rb then needs to be modified like this   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  gt  File stat  filename out   mtime            in this case  we ll need to create the output CSS file fresh          puts   processing   filename in  n -- gt  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

User · Answer

Yes  in near future  i write this in june 2012  you can define native css variables  without using less sass etc   The Webkit engine just implemented first css variable rules  so cutting edge versions of Chrome and Safari are already to work with them  See the Official Webkit  Chrome Safari  development log  with a onsite css browser demo   Hopefully we can expect widespread browser support of native css variables in the next few months

User · Answer

There s no easy CSS only solution   You could do this    Find all instances of background-color and color in your CSS file and create a class name for each unique color    top-header   color   fff     content-text   color   f00     bg-leftnav   background-color   fff     bg-column   background-color   f00     Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color  Last  remove any references of colors in your CSS other than your newly created color classes

User · Answer

Do not use css3 variables due to support    I would do the following if you want a pure css solution    Use color classes with semenatic names    bg-primary     background   880000      bg-secondary   background   008800      bg-accent      background   F5F5F5     Separate the structure from the skin  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     Put these inside a separate css file to change as needed

[css] How can I define colors as variables in CSS?

Examples related to css

Examples related to variables

Examples related to colors

Examples related to css-variables