SASS值变量的使用:最佳实践

Question

在重复值时使用sass变量有意义吗？例如：

$common-px-value: 20px
$max-value: 100px
$min-value: 200px
.someClass, someAnotherClass
  some styles...
  img
    object-fit: cover
    min-width: $min-value
    max-width: $max-value
    min-height: $min-value
    max-height: $max-value

，什么是最好的有SASS值变量的实践家？可能会将它添加到单独的文件夹中，以便分离逻辑？还有别的事情：)

是否只用于代码的可读性？在实际项目中是怎样的一个好的实践？毕竟，值可以在整个应用程序中重复，但是很难事先找到所有的值。

Answer 1

您可以为此使用一个混合器，这将使您的代码更加枯燥和易于使用。所以你可以做这样的事

@mixin myValues(
$minw: null,
$maxw: null
) {
min-width: $minw;
max-width: $maxw;
}

然后，您可以在.someClass的样式中使用这个混合体，如下所示：

.someClass {
 @include myValues($minw: 200px, $maxw: 200px);
}

您可以在每次需要时更改传递给该混合器的参数的值，而不是每次重复相同的代码块。希望这能有所帮助。

编辑: sass语法可能与scss略有不同(我在本例中曾使用过)。