在HTML中使用变量作为类

Question

我的SASS文件中有几个变量，我希望在我的HTML中直接使用它们作为类或样式。 我知道我可以使用映射功能但是，它非常繁琐。 有没有其他方法来实现它？简单的方法？

例如：

sass文件：

$margin-base-vertical:30px 0;

html文件：

<div class="some-container margin-base-vertical">
 some things
</div>

Answer 1

这不是一个好主意。如果你使用描述样式的类，你最终会得到一个非常难以理解的代码。每次要更改样式时，都必须更改标记（HTML）和CSS。

最佳做法是使用语义标记。

这就是sass非常强大的地方，你可以像这样使用你的变量：

.some-container {
    margin: $margin-base-vertical;
}

编辑：

我能为你的问题考虑的唯一选择是声明一个变量，然后在你的课堂上使用它，之后，你将获得你的标记所需的课程。

SASS文件

$margin-base-vertical: 30px 0;
.margin-base-vertical { margin: $margin-base-vertical; }

<强> HTML

<div class="some-container margin-base-vertical">
 some things
</div>