css-variables

问题 I'm curious to the behaviour of using calc() in setting a CSS variable. Example: #test { --halfWidth: calc(100% / 2); } Now, if the #test element, say a div , was 500px wide, I would like the --halfWidth variable to be set to 250px. But, as far as I can tell the var(--halfWidth) code used elsewhere simply drops in the calc(100% / 2) string instead of 250px . Which means that I can't use the calculation of say element A and use it in element B later on, since it would simply set for example

问题 I'm looking a way of modifying a CSS variable as you would in SCSS Define a color like primary - and automatically I would get shades for focus and actives states. Basically, would like to change one variable in css variables and get 3 shades of the same color. What Id like to achieve in CSS $color-primary: #f00; .button { background: $color-primary; &:hover, &:focus { background: darken($color-primary, 5%); } &:active { background: darken($color-primary, 10%); } } trying to achieve: :root {

问题 See this animation: The golden div has an animation where a custom property is animated ( @keyframes roll-o-1 animates --o ). This animates in steps. The silver div has an animation where a normal property is animated ( @keyframes roll-o-2 animates left ). This animates continuously. Why doesn't the golden div animate smoothly? Is there any workaround which also uses variables? #one { width: 50px; height: 50px; background-color: gold; --o: 0; animation: roll-o-1 2s infinite alternate ease-in

问题 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

问题 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

问题 I am developing a web site and have optimized it for Firefox and Chrome. The project contains a style sheet called base.css which is included in all the pages, and which contains some global settings and definitions, including a list of variables which I use to store color values like such: :root { --yellow-1: #fff8e3; --yellow-2: #ffe9a9; } and so on, and calling them like for example: .a-class { background-color: var(--yellow-2); } When I look at the page in Edge, all the colors are missing

问题 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

问题 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

问题 I have JS library and I have this issue: I'm creating temporary element for calculating size of character using monospace font. Right now I'm copying inlie style, but I need all styles from original including css variables. I don't want to clone the element, because there are elements, that are inside, that I don't need. Also element may have id set by the user, not sure how this will behave when there will be two elements with same id, so it would be better (I think) to just copy each style

问题 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? 回答1: One possible solution would be to parse the document.styleSheets , and then split the rules into properties