带有变量的CSS3计算

Question

我正在计算一些宽度和边距,具体取决于孩子的数量.

是否有可能在css3中有一个变量,如:

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

我得到的其他一些课程编写如下:

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

是否可以使用一些变量,如n或nrOfChilds？目前我多次声明我的第二个例子并手动更改第一个例子？我知道javascript是一个解决方案.但是有没有本地css3解决方案呢？

/亲切的问候

基督教

Answer 1

在CSS3中没有办法做到这一点.

Answer 2

现在所有主流浏览器都支持使用自定义变量计算的CSS值,通过:

• calc(...)
  • 文档:https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  • 浏览器支持:https://caniuse.com/css-variables
• var(--...)
  • 文档:https://developer.mozilla.org/en-US/docs/Web/CSS/var
  • 浏览器支持:https://caniuse.com/calc

例

.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>