css-variables

This question already has an answer here: How can I define colors as variables in CSS? 19 answers I am trying to use CSS Variables. I look online for tutorials and all of them worked so far. Here's my CSS: @variables { defaultColor: #8E5050; defaultBackGround: #E1DBC3; } body { background: var(defaultBackGround); } a { color: var(defaultColor); } I also tried: body { background: @defaultBackGround; } a { color: @defaultColor; } None of them works, What am I doing wrong? Thanks Petah I would use a CSS preprocessor such as Sass or Less . The variables you are using are not part of the normal CSS

Is there a way to use CSS variables with Sass functions e.g. lighten? Something like this: :root { --color: #ff00ff; } .div { background-color: lighten(var(--color), 32%); } I'm getting an error message that "Argument $color of lighten($color, $amount) must be a color". I'm using CSS (not Sass) variables, because I need to use them in js. UPDATE: I just read that Sass 3.5.0 now should support CSS Custom Properties with native CSS functions. I tried this with node-sass but as yet libsass doesn't support this feature of Ruby Sass 3.5 For native CSS functions I think sass replaces them with its

The latest version of Firefox has support for CSS Variables , but Chrome, IE and loads of other browsers do not. It should be possible to access a DOM Node or write a little method which returns whether the browser supports this feature, but I haven't been able to find anything which is currently able to do this. What I need is a solution which I can use as condition to run code if the browser does not support the feature, something like: if (!browserCanUseCssVariables()) { // Do stuff... } James Donnelly We can do this with CSS.supports . This is the JavaScript implementation of CSS's

What I'm trying to achieve in javascript will look like this: myVar = newVar || myVar; In css I'm doing the following: --my-var: var(--new-var, var(--my-var)) Seems like it does not work. Is it even possible to have an old value in fallback if new value is undefined? You can't assign the value of a custom property as a fallback value in a var() expression when redeclaring the same custom property. The old value is overridden during cascade resolution, so there would be no old value left to fall back to by the time the var() expression is evaluated. Generally CSS can't do if/then/else , but

I’m trying some experiments with CSS vars, and I couldn’t get this to work or find any documentation about it. Does anyone know if it’s possible to use a CSS var in a CSS3 selector? I made the following example to explain what I’m trying to do. This example is Chrome only. JSFIDDLE http://jsfiddle.net/68Rrn/ CSS :root { -webkit-var-count: 5; /* define my var! */ } li { width:100px; height:100px; background-color:blue; display:inline-block; list-style:none; } ul li:nth-child(4) { background-color:red; } ul li:nth-child(-webkit-var(count)) { /* I can't get this working, is it even supported? I'm

I am trying to have CSS variables for box model properties. I want to support both setting a value for all sides as well as individual sides. I want to have default values, but be override-able either way. I tries using fallback values, but with little success. Something like: :root { --border-width-top: 0; --border-width-right: 0; --border-width-bottom: 0; --border-width-left: 0; --border-width: 0; } div { 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 { -

In JavaScript, you can get the value of a CSS variable using getPropertyValue(property) . This function is useful for retrieving variables declared in the :root block. :root { --example-var: 50px; } However, if this variable expression contains a function like calc , the getPropertyValue call returns the expression as text rather than computing it, even when using getComputedStyle . :root { --example-var: calc(100px - 5px); } How can I get the computed value of a CSS variable that uses a CSS function like calc ? See the example below: let div = document.getElementById('example'); console.log