A CSS Custom Property is the same thing as a CSS Variable. But that seems to come of some clumsy naming. They weren’t wrong to title the page: Using CSS custom properties (variables) However a CSS Variable is not a variable in the traditional sense, as there is no way to define it so that … Read more
You can use two CSS variables to simulate the recursive behavior and avoid cycle dependency. Here is an example: body { –x: 10; } .y { –y: calc(var(–x) + 1); } .x{ –x: calc(var(–y) + 1); } .result { border-right:calc(1px * var(–y)) solid red; border-left:calc(1px * var(–x)) solid green; height:50px; } <body> <div class=”y”> <div … Read more
Technically you cannot because the computed value is not static and will depend on other properties. In this case it’s trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it’s used with var(). Same … Read more
This can be achieved by defining variables using (as of writing this, not well-supported) @property, which allows declaring types and that allows the browser to “understand”, for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable. Example Code: @property –opacity { syntax: ‘<number>’; /* <- defined as … Read more
Not yet. In the same link you can read: Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. Still no browser support the attr() for properties different than content and also no support for the type-or-unit. … Read more
Recently, variables have been added to the official CSS specs. Variables allow you to so something like this : body, html { margin: 0; height: 100%; } .theme-default { –page-background-color: #cec; –page-color: #333; –button-border-width: 1px; –button-border-color: #333; –button-background-color: #f55; –button-color: #fff; –gutter-width: 1em; float: left; height: 100%; width: 100%; background-color: var(–page-background-color); color: var(–page-color); } button … Read more
Cascading variables (i.e. the var() notation) aren’t defined for use with anything but property declarations, so no, they cannot be used in selectors. Judging by their name, this makes sense, since only property declarations can cascade, not selectors. From the spec: A variable can be used in place of any part of a value in … Read more
You can unset the value using initial to use the fallback one: :root { –border-width-top: 2px; –border-width-right: 2px; –border-width-bottom: 2px; –border-width-left: 2px; –border-width: 0; } div { margin:5px; border-color: red; border-style: solid; border-width: var(–border-width, var(–border-width-top) var(–border-width-right) var(–border-width-bottom) var(–border-width-left)); } div.box { –border-width:initial; –border-width-top: 10px; } <div>some content</div> <div class=”box”>some content</div> from the the specification: The … Read more
When this question was asked, it wasn’t possible to animate custom properties, as @temani afif correctly pointed out – since the UA has no way to interpret their contents Since then, CSS Houdini have put together the CSS Properties and Values API specification This specification extends [css-variables], allowing the registration of properties that have a … Read more
Use calc() and do a simple multiplication with any unit: div{width:calc(var(–mywidth) * 1%);} example: :root { –a:50; } .box { width:calc(var(–a) * 1%); border:calc(var(–a) * 0.5px) solid red; background:linear-gradient(calc(var(–a) * 0.8deg),blue 50% ,green 0); padding:20px; box-sizing:border-box; } <div class=”box”></div>