Question

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

在css3中是否可以使用如下变量：

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

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

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

是否可以使用一些变量，如n或nrOfChilds？目前我多次声明我的第二个例子并手动更改第一个例子？我知道javascript是一个解决方案。但是有没有针对此的原生css3解决方案？

/亲切的问候

基督教

Answer 1

（截至2012年）在CSS3中无法做到这一点。

截至2019年（及更早），见上面接受的答案。

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

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果使用.NET服务器端，请查看LESS或.less。

Answer 4

只有css3没有办法做到这一点。您可以使用.less，它使用动态行为，如变量，混合，操作和函数。基于JS。或者您可以使用sass进行导轨处理。还有其他的，但我猜这两个是css扩展最受欢迎的。

Answer 5

在CSS3中不可能，既不使用LESS也不使用SASS。唯一的方法是通过javascript，这应该很简单。

Answer 6

使用SASS的示例：-

$nrOfChilds: 20;

.someClass {
   width: calc(#{$nrOfChilds} * 80px);
}

带有变量的CSS3计算

6 个答案:

实施例