根据图元在组中的位置设置其样式

Question

我正在尝试创建一组框。我想试试看是否可以根据盒子在组中的位置设置盒子的大小。

目前，如果我事先知道框的数量，并使用：nth-child（）选择器和适当的位置，这是可能的。

由于CSS已经具有查找元素在组中的位置的能力，是否可以使用此定位作为大小的输入。

例如像这样的东西

#boxes:nth-child() {
    height:calc(n * 10);
    width:calc(n * 10);
}

使用服务器端代码甚至Javascript都可以很容易地实现这一目的，但我们只是想知道我们是否可以使用CSS来实现这一点，使用calc或任何其他功能。

Answer 1

在纯css中无法做到这一点，但在SCS中可以做到。例如：

@for $i from 1 through 5 {
  .box:nth-child(#{$i}) {
     height: 50px * $i;
   }
}

你可以在这里玩代码。

Answer 2

在CSS选择器级别3中，没有针对元素的方法，使用对应于该元素在组中的位置的变量，为该元素定制样式。

在CSS中，calc（）函数不允许变量。仅允许将带有加法（）、减法（-）、乘法（*）和除法（/）的数学表达式作为分量值。

但是，使用Sass，CSS预处理器可以在calc（）函数中使用变量。

参考文献：

• CSS选择器级别3
• 8.1.数学表达式：calc（）
• CSS calc（）函数中的Sass变量
• Sass变量