Html 带变量的CSS3计算

我正在根据孩子的数量计算一些宽度和边距

在css3中是否可能有如下变量：

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

我得到的其他课程如下所示：

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

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

/问候

Christian

查看一下或是否使用.NET服务器端。

（自2012年起）在CSS3中无法做到这一点

---

截至2019年（及更早），请参见上述公认答案。

仅使用css3无法实现这一点。您可以使用，即使用动态行为，如变量、混合、操作和函数。是基于JS的。或者，您也可以使用rails方法。还有其他的，但我想这两个是最流行的css扩展。

在CSS3中不可能，也不可能使用更少或SASS。唯一的方法是通过javascript，这应该非常简单。

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

• calc（…）

  • 文件：
  • 浏览器支持：

• var（--…）

  • 文件：
  • 浏览器支持：

例子

.somebar{
/*我定义了“-mydepth”的初始值*/
--我的深度：1；
宽度：计算值（var（-mydepth）*50px）；
高度：50px；
背景：绿色；
}
.1级{
--深度：2；
}
.2级{
--深度：3；
}

示例：计算（var（--mydepth）*50px）
预期结果（如果浏览器支持）

使用SASS的示例：-

$nrOfChilds: 20;

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

---

我正在考虑。但是，LESS怎么知道我在HTML中声明的孩子数量呢？孩子数量多久变化一次？如果很少，这会是一个较少的变量吗？如果经常使用，那么这可能是javascript解决方案的一项工作。您可以查看CSS

flexible box模型

，根据您的内容实现动态灵活的间距。很容易使用，它是一个javascript插件。选择器的工作原理与css及其易于修改的css（）Thx类似。几个月前，我使用了sass和flexbox。没有，但那没关系。