Creating CSS Global Variables Stylesheet theme management

Question

Is there a way to set global variables in css such as    Color1    fff   Color2    b00   h1     color  Color1    background  Color2

User · Accepted Answer

Latest Update  16 01 2020 CSS Custom Properties  Variables  have arrived  It s 2020 and time to officially roll out this feature in your new applications   Preprocessor  quot NOT quot  required  There is a lot of repetition in CSS  A single color may be used in several places  For some CSS declarations  it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally  For non-trivial projects  this is not always possible  By declaring a variable on the  root pseudo-element  a CSS author can halt some instances of repetition by using the variable  How it works Set your variable at the top of your stylesheet  CSS Create a root class   root      Create variables  --  String     value    root     --red   b00    --blue   00b    --fullwidth  100      Set your variables anywhere in your CSS document  h1     color  var --red      MyText     color  var --blue     width  var --fullwidth       BROWSER SUPPORT   COMPATIBILITY See caniuse com for current compatability    Firefox  Version 31   Enabled by default  Supported since 2014  Leading the way as usual   More info from Mozilla  Chrome  Version 49   Enabled by default   Supported since 2016  Safari IOS Safari  Version 9 1 9 3  Enabled by default   Supported since 2016  Opera  Version 39   Enabled by default   Supported since 2016  Android  Version 52   Enabled by default   Supported since 2016  Edge  Version 15   Enabled by default   Supported since 2017 CSS Custom Properties landed in Windows Insider Preview build 14986  IE  When pigs fly  It s time to finally let this ship sink  No one enjoyed riding her anyway     W3C SPEC Full specification for upcoming CSS variables Read more  TRY IT OUT A fiddle and snippet are attached below for testing   It will only work with supported browsers   DEMO FIDDLE  x000D   x000D   root     --red   b00    --blue   4679bd    --grey   ddd    --W200  200px    --Lft  left     Bx1   Bx2   Bx3   Bx4     float  var --Lft     width  var --W200     height  var --W200     margin  10px    padding  10px    border  1px solid var --red      Bx1     color  var --red     background  var --grey      Bx2     color  var --grey     background  black     Bx3     color  var --grey     background  var --blue      Bx4     color  var --grey     background  var --red     x000D   lt p gt If you see four square boxes then variables are working as expected  lt  p gt    lt div class  Bx1  gt I should be red text on grey background  lt  div gt   lt div class  Bx2  gt I should be grey text on black background  lt  div gt   lt div class  Bx3  gt I should be grey text on blue background  lt  div gt   lt div class  Bx4  gt I should be grey text on red background  lt  div gt  x000D   x000D   x000D

User · Answer

Try SASS http   sass-lang com  or LESS http   lesscss org   I love SASS and use it for all my projects

User · Answer

You will either need LESS or SASS for the same     But here is another alternative which I believe will work out in CSS3    http   css3 bradshawenterprises com blog css-variables   Example      root       -webkit-var-beautifulColor  rgba 255 40 100  0 8       -moz-var-beautifulColor  rgba 255 40 100  0 8       -ms-var-beautifulColor  rgba 255 40 100  0 8       -o-var-beautifulColor  rgba 255 40 100  0 8       var-beautifulColor  rgba 255 40 100  0 8         example1 h1       color  -webkit-var beautifulColor       color  -moz-var beautifulColor       color  -ms-var beautifulColor       color  -o-var beautifulColor       color  var beautifulColor

User · Answer

It s not possible using CSS  but using a CSS preprocessor like less or SASS

User · Answer

I do it this way   The html    lt head gt       lt style type  text css  gt   lt   require once  xCss php      gt   lt  style gt   lt  head gt    The xCss php     lt      place here your vars  fntBtn    bold 14px  Arial   colBorder      556677     colBG0         dddddd     colBG1         44dddd     colBtn         aadddd        here goes your css after the php-close tag     gt  button   border  solid 1px  lt     colBorder    gt   border-radius 4px  font   lt     fntBtn    gt   background-color  lt     colBtn    gt

User · Answer

You can t create variables in CSS right now  If you want this sort of functionality you will need to use a CSS preprocessor like SASS or LESS  Here are your styles as they would appear in SASS    Color1  fff   Color2  b00   Color3  050   h1       color  Color1      background  Color2      They also allow you to do other  awesome  things like nesting selectors    some-id       color red        amp  hover           cursor pointer            This would compile to    some-id   color red     some-id hover   cursor pointer      Check out the official SASS tutorial for setup instructions and more on syntax features  Personally I use a Visual Studio extension called Web Workbench by Mindscape for easy developing  there are a lot of plugins for other IDEs as well   Update  As of July August 2014  Firefox has implemented the draft spec for CSS variables  here is the syntax    root     --main-color   06c    --accent-color   006       The rest of the CSS file     foo h1     color  var --main-color

[css] Creating CSS Global Variables : Stylesheet theme management

CSS Custom Properties (Variables) have arrived!

It's 2020 and time to officially roll out this feature in your new applications.

How it works

BROWSER SUPPORT / COMPATIBILITY

TRY IT OUT

Examples related to css

Examples related to variables