SCSS根据另一个设置值

Question

我只想尝试使用SCSS来解决某些问题。

如果我不清楚我在问什么，请随时向我询问更多细节，但这就是我想要实现的目标。

伪代码：

.class1 { width:100px; }
.class2 { margin-right:[.class1{width}] + 2 }

编译成

.class1 {width:100px; }
.class2 { margin-right:102px; }

Answer 1

我相信得到你想要的东西，最好使用变量：

$yourWidth: 100px;
.class1 { width: $yourWidth; }
.class2 { margin-right: ($yourWidth + 2); }

更新（根据评论信息）

您可以在$ColCount下面添加一个以空列表开头的全局变量，如下所示：

$WidthList: ();

然后在计算@mixin columns($numCols)后的$colWidth内，通过添加此函数将该列的width值添加到$WidthList：

join($WidthList, $colWidth);

然后，一旦计算了所有列，您应该有一个包含所有width值的列表，以便您可以在其他地方访问它们，从而... ...

.class2 { margin-right: (nth($WidthList, 5) + 2); }

...应该为.cl-col5提供所需的margin值。

请注意，我没有对此进行测试。我也从未使用过SASS。我严格按照here及其网站上其他地方的文档进行操作。