css-calc

This question already has an answer here: Parse errors when using calc with rem and px 1 answer I need to validate a CSS3 file where I'm using the following code: width:calc(96.3% - 312px) It returns this error: Value Error : width Parse Error - 312px) My last choice is to use a Javascript function on page load and window resize to get the width value when it's possible using CSS3 (only for IE8 or older). This appears to be a bug in the validator. Your calc() syntax is valid. Don't worry about it. Whenever you need to validate your CSS, remove just that declaration so it does not cause

How do I use a CSS calc function inside another CSS calc function? According to this post it is possible but there is no example of that. It is possible to use calc() inside another calc(). An example: div{ width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/ } div p{ width: calc(100% - 30px);/*100% is total width of the div*/ } Update on nested calc with css variables: .foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); } After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2),

In Stylus, how do I use a variable in a calc expression? For example, the following doesn't work ( arrow-size being a variable): arrow-size = 5px left calc(50% - arrow-size) In order to use a Stylus variable inside a calc expression, one must employ the string % operator : arrow-size = 5px left "calc(50% - %s)" % arrow-size To use multiple variables (not just one) in calc (or with other functions), i use sprintf as you used, but with tuples: arrow-size = 5px measure = 50% left "calc(%s - %s)" % (measure arrow-size) Remember that interepolation in Stylus is supported through {} and it's used

calc() apparently works in a transform, but this does not: transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))); Also, this works, but it's basically the same formula, only with a percent vs decimal. Only added this so you can see the formula works here: right: calc(30% + (75 - 30) * ((100vw - 320px) / (780 - 320))); I have a container that has a width as a percent, and max width of 300px, for example. I want a child of it to always scale, using transform:scale() , to a percent of the parent's actual current width. Why does my transform calc function not work? Using

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 have the following CSS: body { width: calc(700px + 2 * 4rem); } .someclass { margin: calc(2rem - 2px) 0; } When I run this through the W3C CSS validation, I get Value Error : width Parse Error + 2 * 4rem) Value Error : margin Parse Error - 2px) 0 What’s causing this? All the units I’m using in calc() are length units, and calc() should be able to handle it. This is a known bug in w3 css validator: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913 来源： https://stackoverflow.com/questions/18035088/parse-errors-when-using-calc-with-rem-and-px

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