css-variables

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 { --color-primary: #f00; --color-primary-darker: #f20000 // var(--color-primary) * 5% darker --color

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 1 and 2 work but box 3 doesn't. I would expect box 3 to look the same as box 2 but it doesn't. I

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: var(--main-color); } It's also important to note, I do have the Enable experimental Web platform

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- mhatch CSS variables are not supported by IE nor will they ever be. Update: CSS variables are supported

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-scale) - 1)) / 2 * var(--scrolled-out-y)); the only way I found is to put part of calculation to unused