css - 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); }

...应该为 margin 产生您想要的 .cl-col5 值。

请注意，我没有对此进行测试。我也没有真正使用过 SASS。我严格基于找到的文档 here以及他们网站上的其他地方。