CSS3 calc with variables

Question

I calculate some widths and margins depending on the number of children.

Is it possible in css3 to have a variable of type:

.someClass { width: -moz-calc(nrOfChilds * 80px); } 

Some other classes that I got are written as follows:

 .anotherClass:nth-child(n) { margin-left: -moz-calc(n * 50px); } 

Can I use some variables like n or nrOfChilds? At the moment, I declare my second example several times and manually change it manually? I know javascript is a solution. But is there a native css3 solution for this?

/Yours faithfully

Christian

Answer 1

Currently, all major browsers support computed CSS values ​​using custom variables:

• calc(...)
  • Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  • Browser Support: https://caniuse.com/css-variables
• var(--...)
  • Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/var
  • Browser Support: https://caniuse.com/calc

example

 .somebar { /* I define the initial value of "--mydepth" */ --mydepth: 1; width: calc(var(--mydepth) * 50px); height: 50px; background: green; } .level1 { --mydepth: 2; } .level2 { --mydepth: 3; } 

 <h3>Example of: calc(var(--mydepth) * 50px)</h3> <div class="somebar"></div> <div class="somebar level1"></div> <div class="somebar level2"></div> <h3>Expected result (if supported by browser)</h3> <div class="somebar" style="width:50px"></div> <div class="somebar" style="width:100px"></div> <div class="somebar" style="width:150px"></div> 

Answer 2

(As of 2012) There is no way to do this in CSS3.

As of 2019 (and earlier), see the accepted answer above.

Answer 3

See LESS or . less when using the server side of .NET.

Answer 4

there is no way to do this only css3. You can use . Less , which use dynamic behavior, such as variables, mixins, operations, and functions. Based on JS. Or you can use rails with sass . there are others, but I think these two are the most popular for css extensions.

Answer 5

Impossible in CSS3, neither using LESS nor SASS. The only way is through javascript, which should be pretty simple.

Answer 6

JQuery is easy to use, it is a javascript plugin. The selector works like css and its simple change to css ( css and jQuery )