SASS 值变量的使用：最佳实践 [关闭]答案

【问题标题】：Usage of SASS value variables: best practics [closed]SASS 值变量的使用：最佳实践 [关闭]
【发布时间】：2020-09-15 19:56:54
【问题描述】：

重复值时使用 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 值变量的最佳实践是什么？ 也许将其添加到单独的文件夹以分离逻辑？还有别的：）

它仅用于代码的可读性吗？ 在实际项目中有什么好的做法？毕竟，值可以在所有应用程序中重复，但很难事先找出所有值。

【问题讨论】：

标签： css sass node-sass css-variables

【解决方案1】：

您可以为此使用 mixin，这将使您的代码更加干枯且易于使用。所以你可以做类似的事情

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

然后您可以在 .someClass 的样式中使用该 mixin，如下所示：

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

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

编辑：sass 语法可能与 scss（我在此示例中使用的）有点不同

【讨论】：