css-variables

CSS variables and opacity

由 爷，独闯天下 提交于 2019-12-01 08:09:20
A quick question to which the answer is probably "NO", but I'm new to CSS variables so I'm not sure. If I want to define color and later be able to add alpha channel to it, is my only option with CSS variables would be to define it as 3 numbers for RGB channels: --color: 12 12 12 And later use it ALWAYS with rgb or rgba ? color: rgb(var(--color)); background: rgba(var(--color), .5); There is really no way to define an actual color and later add alpha to it using only CSS variables? Probably my best bet would be to define 2 vars: --color-rgb and --color: rgb(var(--color-rgb)) You are almost

CSS Variables - Swapping values?

由 夙愿已清 提交于 2019-11-30 21:51:28
I have a very simple problem with CSS variables. I would like to swap two CSS variables, basically the CSS equivalent of [a, b] = [b, a] in ES6. Here's a simple example: <p>White background</p> <button>Black background</button> <div> <p>Black background</p> <button>White background</button> </div> :root { --primary-color: #fff; --secondary-color: #000; } body { background-color: var(--primary-color); } button { background-color: var(--secondary-color); } div { /* i'd like to do the following: */ --primary-color: var(--secondary-color); --secondary-color: var(--primary-color); /* so here, `-

Can a recursive variable be expressed in css?

由 吃可爱长大的小学妹 提交于 2019-11-30 18:59:33
For the html: <body> <div> <div> <div> ... </div> </div> </div> </body> Are there any ways to create a recursive variable that uses its parent's value: body > div { --x: 1; } div { --x: calc(var(--x) + 1); } The above is not valid because css variables cannot have dependency cycles . Another invalid example: body > div { --is-even: 0; --is-odd: 1; } div { --is-even: var(--is-odd); --is-odd: var(--is-even); } Are there any indirect ways to express such recursive variables in css? Temani Afif You can use two CSS variables to simulate the recursive behavior and avoid cycle dependency. Here is an

How do I set a value of `inherit` to a CSS custom property? [duplicate]

由 六月ゝ 毕业季﹏ 提交于 2019-11-30 17:54:57
问题 This question already has an answer here : How to store inherit value inside a CSS custom property (aka CSS variables)? (1 answer) Closed 5 months ago . Setting a custom property to a value of inherit does exactly what you’d expect for every other CSS property: it inherits the same property value of its parent. normal property inheritance: <style> figure { border: 1px solid red; } figure > figcaption { border: inherit; } </style> <figure>this figure has a red border <figcaption>this

CSS Variables - Swapping values?

由 痞子三分冷 提交于 2019-11-30 17:50:01
问题 I have a very simple problem with CSS variables. I would like to swap two CSS variables, basically the CSS equivalent of [a, b] = [b, a] in ES6. Here's a simple example: <p>White background</p> <button>Black background</button> <div> <p>Black background</p> <button>White background</button> </div> :root { --primary-color: #fff; --secondary-color: #000; } body { background-color: var(--primary-color); } button { background-color: var(--secondary-color); } div { /* i'd like to do the following:

List CSS custom properties (CSS Variables)

由 冷暖自知 提交于 2019-11-30 14:53:01
I've set some CSS custom properties in my stylesheet: :root { --bc: #fff; --bc-primary: #eee; --bc-secondary: #ddd; } I can retrieve them individually if I already know the name of the CSS variable like so: console.log(getComputedStyle(document.body).getPropertyValue('--bc')); // #fff But if I wanted to pull a list of CSS variables and their values out, how would that be done? One possible solution would be to parse the document.styleSheets , and then split the rules into properties/values var allCSS = [].slice.call(document.styleSheets) .reduce(function(prev, styleSheet) { if (styleSheet

Using CSS Variables (custom properties) in a Pseudo-element's “content:” Property

由 大城市里の小女人 提交于 2019-11-30 03:55:17
Example use (what I want) div::after { content: var(--mouse-x) ' / ' var(--mouse-y); } Test case showing it NOT working: CodePen: CSS Variables in Pseudo Element's "content:" Property (a test case) by Jase Smith document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--mouse-x', e.clientX) document.documentElement.style.setProperty('--mouse-y', e.clientY) // output for explanation text document.querySelector('.x').innerHTML = e.clientX document.querySelector('.y').innerHTML = e.clientY }) /* what I want!! */ div::after { content: var(--mouse-x, 245)" / " var

Can a recursive variable be expressed in css?

由 守給你的承諾、 提交于 2019-11-30 03:20:36
问题 For the html: <body> <div> <div> <div> ... </div> </div> </div> </body> Are there any ways to create a recursive variable that uses its parent's value: body > div { --x: 1; } div { --x: calc(var(--x) + 1); } The above is not valid because css variables cannot have dependency cycles. Another invalid example: body > div { --is-even: 0; --is-odd: 1; } div { --is-even: var(--is-odd); --is-odd: var(--is-even); } Are there any indirect ways to express such recursive variables in css? 回答1: You can

Is there a difference between CSS custom properties and CSS variables?

由 ￡可爱￡侵袭症＋ 提交于 2019-11-29 14:32:07
In all of the material I've read online, it appears that CSS custom properties and CSS variables are the same thing. However, at the end of an example in the Inheritance of CSS Variables section of the Mozilla Developer Network documentation, there is this confusing statement: Keep in mind that these are custom properties, not actual CSS variables. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. The property is only set for the matching selector and

How to use commas in a CSS variable fallback?

由 独自空忆成欢 提交于 2019-11-29 13:52:41
How can one use commas in the fallback value of a CSS variable? E.g. this is fine: var(--color, #f00) , but this is weird var(--font-body, Verdana, sans-serif) . The idea is to be able to set a font-family using a variable with a fallback value of say Verdana, sans-serif . Edit: This actually works pretty well for browsers that support CSS properties, but the issue seems to come from Google Polymer's polyfills. For future reference, I ended up using variables for both the font and the font family fallback like so (seems to be the cleanest way of doing it for now): font-family: var(--font-body,
订阅 css-variables