Question

有没有办法在SASS中自定义变量？例如：

.m-b-{$number} {
    margin-bottom: $number;
}

如果我给一个元素赋予class =“m-b-50”，那么它应该是margin-bottom 50.我只是想知道SASS是否可行。

Answer 1

是的，可以在variable interpolation or variable substitution的帮助下使用#{}在SASS中进行变量替换。

插值 是评估包含一个或多个变量的表达式或字符串的过程，从而产生一个结果，其中变量被替换为相应的值的

$number:60;
$n: 20px;

.m-b-#{$number}{
  margin-bottom: #{$number}px;
  margin-top: $n;
}

Answer 2

对于面临此问题的其他人，这是可以实现此目标的方法：-

cov[1,0]

Answer 3

答案是：不可能。 SASS只是一种为您预先生成CSS的语言。没有由HTML标记的内容触发的按需动态创建类。当浏览器呈现HTML并应用您指定的类时，它仍然只是使用CSS。即如果您将class="m-b-50"分配给元素，则必须已经在某处显式定义了类.m-b-50。如其他答案中所述，SASS可以使生成一堆预定义的类变得更加容易，但是您必须预先知道要支持哪些值。

现在，您可以为一些非常大的，包罗万象的范围生成类，例如-1000至1000，以有效地支持您可能尝试使用的所有值，并且它似乎可以满足您的要求，但是您将迫使用户下载更大的CSS文件，其中很大一部分很可能是未使用的CSS，这很浪费，而且在付费和受限数据计划的世界中可能会被忽略。

SASS使用变量自定义类名

3 个答案: