Since the question was actually about custom properties, and not about the pseudo-class :root , I’ll give you a few examples by which I liked them.
Although preprocessors are able to use their internal variables, they still do not know how to do such a thing, which seems to be expected by everyone: after changing a variable, automatically change the existing properties that use it. Example, dull preprocessing variables, SCSS syntax:
$main-index: 20px; .block { padding: $main-index; } .block-number-2 { font-size: $main-index; } @media (max-width: 900px) { $main-index: 20px; /* хотелось бы не задавать заново все свойства, но придётся :( */ .block { padding: $main-index; } .block-number-2 { font-size: $main-index; } }
An example of fashionable CSS variables (the difference can be seen even here, if you click on Full page ):
:root { --main-index: 20px; } div { width: calc(var(--main-index) * 10); height: calc(var(--main-index) * 8); border: 1px solid; } .block { padding: var(--main-index); } .block-number-2 { font-size: var(--main-index); } @media (max-width: 900px) { :root { --main-index: 10px; } }
<div class=block>Text inside block 1</div> <div class=block-number-2>Text inside block 1</div>
Please note that only one variable has changed and you do not need to rewrite a bunch of properties, profit!
Finally, you can separate the transform property if you use more than one transformation (although we have long been promised to make the individual properties scale , translate and others). Earlier, animating several properties or rewriting them using JS was another exercise, but now everything has changed! Example:
var block = document.querySelector('.transformator'), bodyStyles = window.getComputedStyle(document.body), scale = bodyStyles.getPropertyValue('--scale'), trX = bodyStyles.getPropertyValue('--trX'), trY = bodyStyles.getPropertyValue('--trY'), rotation = bodyStyles.getPropertyValue('--rotation'); document.querySelector('.controller').onclick = function(e) { if ( e.target.classList.contains('scale') ) { scale *= 1.1; block.style.setProperty('--scale', scale); } else if ( e.target.classList.contains('rotate') ){ rotation = parseInt(rotation) + 15 + 'deg'; block.style.setProperty('--rotation', rotation); } else if ( e.target.classList.contains('movex') ){ trX = parseInt(trX) + 10 + 'px'; block.style.setProperty('--trX', trX); } else if ( e.target.classList.contains('movey') ){ trY = parseInt(trY) + 10 + 'px'; block.style.setProperty('--trY', trY); } }
:root { --trX: 0; --trY: 0; --rotation: 0deg; --scale: 1; --base: 50px; } .transformator { width: var(--base); height: var(--base); background-image: linear-gradient(#2196f3 0%, #2196f3 50%, #ff0 50%); /* Slava Ukraini! */ transform: scale(var(--scale)) translate3d(var(--trX), var(--trY), 0) rotate(var(--rotation)); transition: transform .5s; } .controller { margin-bottom: var(--base); }
<div class=controller> <button class=scale>scale +10%</button> <button class=rotate>rotate 15 deg</button> <button class=movex>move X +10px</button> <button class=movey>move Y +10px</button> </div> <div class=transformator></div>
Special mention deserves the use of CSS-variables with the function calc() . Although in the examples above it has already been used, but I think it should be mentioned separately. This is especially interesting when creating figures, an example (also look at the whole screen):
:root { --start-index: 3; --a: calc( var(--start-index) * 20px); --b: calc( (var(--start-index) + var(--start-index) / 3) * 20px); --c: calc( (var(--start-index) + (var(--start-index) / 3) * 2) * 20px); } .pythagorean-triangle { position: relative; width: var(--b); height: var(--a); } .pythagorean-triangle div { height: 1px; background-color: #000; position: absolute; top: 0; left: 0; } .pythagorean-triangle__a { width: var(--a); transform: rotate(90deg); transform-origin: 0 0; } .pythagorean-triangle__b { width: var(--b); } .pythagorean-triangle__c { width: var(--c); left: auto !important; right: 0; transform: rotate(-36.8deg); transform-origin: 100% 0; } @media (min-width: 900px) { :root { --start-index: 30; } }
<div class=pythagorean-triangle> <div class=pythagorean-triangle__a></div> <div class=pythagorean-triangle__b></div> <div class=pythagorean-triangle__c></div> </div>
The coefficients are adjusted on the basis of the simplest 3² + 4² = 5².
It became easy to generate and resize equilateral figures and figures with properties dependent on each other (squares, circles, ovals, parallelepipeds)! )
Well, and a bonus track, stylization SVG-sprite type <use> using CSS-variables. In the automatic generator of sprites in the future, I hope, it will be possible to insert CSS variables for each shape.
.sprite { display: none; } .cross { display: inline-block; vertical-align: top; width: 100px; height: 200px; } .cross--red { --one-color: red; --two-color: #9a1616; } .cross--green { --one-color: green; --two-color: #5ef636; } .cross--blue { --one-color: blue; --two-color: #4666d5; }
<svg xmlns="http://www.w3.org/2000/svg" class=sprite> <g id="icon"> <rect width="100" height="10" x="0" y="40" style="fill: var(--one-color, #000)"/> <rect width="10" height="200" x="45" y="0" style="fill: var(--two-color, #000)" /> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="cross"> <use xlink:href="#icon"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="cross cross--red"> <use xlink:href="#icon"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="cross cross--green"> <use xlink:href="#icon"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="cross cross--blue"> <use xlink:href="#icon"/> </svg>
PS that's all, very sorry that I interpreted the contest as the best definition of a pseudo-class :root . I hope the set of these juz-cases will interest you.
PPS tick off finally the answer from @Qwertyi as accepted)
:root(and the question is about this), because CSS variables can be set in any selector. - Vadim Ovchinnikov:rootfor CSS variables. And I do not want my colleagues to thoughtlessly use this selector, not realizing that you can do without it. - Vadim Ovchinnikov