css-variables | 易学教程

Unable to overwrite CSS variable with its own value

阅读更多关于 Unable to overwrite CSS variable with its own value

问题 Lets assume to have the following CSS: .box { width: var(--box-size); height: var(--box-size); border: 1px solid red; } .box--larger { --box-size: 66px; } .box--larger1 { --box-size: calc(var(--box-size) + var(--box--larger)); } .box--larger2 { --box-size: calc(50px + var(--box--larger)); } :root { --box-size: 50px; --box--larger: 16px; } <div class="box">1</div> <div class="box box--larger">2</div> <div class="box box--larger1">3</div> <div class="box box--larger2">4</div> I wonder why boxes

CSS native variables not working in media queries

阅读更多关于 CSS native variables not working in media queries

I am trying to use CSS variables in media query and it does not work. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { } From the spec , The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.) So no, you can't use it in a media query. And that makes sense. Because you can set --mobile-breakpoint e.g. to :root

Unable to get CSS variables working in Chrome 34

阅读更多关于 Unable to get CSS variables working in Chrome 34

问题 I previously asked a very similar question for an older version of Chrome. However, I am again having a hard time getting CSS variables to work, this time in Chrome 34 (Version 34.0.1847.131 m) on Windows 7. (Have not attempted on other OSes.) I see that the syntax has been changed (for the old one, see the question linked above) and the new one is what is currently in the CSS Variables spec.: :root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ h1#foo { color:

CSS Variables - How to concatenate a minus symbol with CSS Variable in a calc()

阅读更多关于 CSS Variables - How to concatenate a minus symbol with CSS Variable in a calc()

Hi so let me start by showing you how I would do this in SCSS: $submenu-padding-left: 1.5em; transform: translateX(calc(-#{$submenu-padding-left} + .5em)); which would compile to: transform: translateX(calc(-1.5em - .5em)) Basically SCSS allows me to concatenate a minus symbol - with a variable in order to convert it to a negative value. Is it possible to achieve this with CSS Variables? Yes you can do it. Simply multiply by -1 : :root { --margin-l: 50px; } body { padding: 0 100px; border:1px solid; } .box-1 { background: red; height: 100px; width: 200px; margin-left: calc(-1 * var(--margin-l)

CSS native variables not working in media queries

阅读更多关于 CSS native variables not working in media queries

问题 I am trying to use CSS variables in media query and it does not work. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { } 回答1: From the spec, The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.) So no, you

How to store inherit value inside a CSS custom property (aka CSS variables)?

阅读更多关于 How to store inherit value inside a CSS custom property (aka CSS variables)?

Let's consider this simplified example in order to illustrate the issue: :root { --color:rgba(20,20,20,0.5); /*defined as the default value*/ } .box { width:50px; height:50px; display:inline-block; margin-right:30px; border-radius:50%; position:relative; } .red {background:rgba(255,0,0,0.5);} .blue {background:rgba(0,255,0,0.5);} .box:before{ content:""; position:absolute; top:0;left:0;right:0;bottom:0; border-radius:50%; transform:translateX(30px); background:var(--color); filter:invert(1); }  <div class="box red" style="--color:rgba(0,255,0,0.5);"> </div>

CSS Variables don't work in Microsoft Edge [duplicate]

阅读更多关于 CSS Variables don't work in Microsoft Edge [duplicate]

问题 This question already has an answer here: Do CSS variables work differently in Microsoft Edge? 1 answer I am designing a new blogger Template. I want to make it easy to change the whole template color at the same time by changing the value of the variable , so I used these lines: :root { --bg-color: #fff; --url-color : #000; --main-color : #2daeeb; --main-hover-color : #2ca1de; --alt-color : #ff6347; } but unfortunately it doesn't work in Edge browser, even though I used the prefix: -webkit-

Use CSS variables with rgba for gradient transparency

阅读更多关于 Use CSS variables with rgba for gradient transparency

问题 Is there a way to use CSS variables when specifying gradient colors with transparency, e.g. :root { --accent-color: #dfd0a5; } h1{ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1)); } 回答1: You can use variables, but you can't sample the individual red, green and blue components from a single hex value in CSS. If you're simply looking to apply an alpha component to an existing RGB triplet, you

How do I apply opacity to a CSS color variable?

阅读更多关于 How do I apply opacity to a CSS color variable?

I am designing an app in electron, so I have access to CSS variables. I have defined a color variable in vars.css : :root { --color: #f0f0f0; } I want to use this color in main.css , but with some opacity applied: #element { background: (somehow use var(--color) at some opacity); } How would I go about doing this? I am not using any preprocesser, only CSS. I would prefer an all-CSS answer, but I will accept JavaScript/jQuery. I cannot use opacity because I am using a background image that should not be transparent. You can't take an existing color value and apply an alpha channel to it. Namely

How do I debug CSS calc() value?

阅读更多关于 How do I debug CSS calc() value?

问题 I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y))) how do I debug calculated value? moreover is there a way to validate/highlight formulas errors? I tried to output like this to the pseudoelement but no luck position: fixed; display: block; left:0; right: 0; background: yellow; padding: 5px; z-index: 100; content: calc((1px * var(--element-height) * (var(--image