css - SCSS 根据另一个设置值

Question

我只是想弄清楚SCSS是否可行。

如果我对我的要求不是很清楚，请随时向我询问更多详细信息，但这就是我想要实现的目标。

伪代码：

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

编译成

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

score 1 · Accepted Answer

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

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

更新（基于评论信息）

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

$WidthList: ();

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

join($WidthList, $colWidth);

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

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

...应该.cl-col5为margin.

请注意，我没有对此进行测试。我实际上也没有使用过 SASS。我严格按照此处和他们网站上其他地方的文档进行此操作。

1 回答 1