Tutorial by Examples

:root { --red: #b00; --blue: #4679bd; --grey: #ddd; } .Bx1 { color: var(--red); background: var(--grey); border: 1px solid var(--red); }

:root { --W200: 200px; --W10: 10px; } .Bx2 { width: var(--W200); height: var(--W200); margin: var(--W10); }

CSS variables cascade in much the same way as other properties, and can be restated safely. You can define variables multiple times and only the definition with the highest specificity will apply to the element selected. Assuming this HTML: <a class="button">Button Green</a>...

Naming When naming CSS variables, it contains only letters and dashes just like other CSS properties (eg: line-height, -moz-box-sizing) but it should start with double dashes (--) //These are Invalids variable names --123color: blue; --#color: red; --bg_color: yellow --$width: 100px; //Vali...

You can re-set variables within media queries and have those new values cascade wherever they are used, something that isn't possible with pre-processor variables. Here, a media query changes the variables used to set up a very simple grid: HTML <div></div> <div></div> &...