在 Sass 中创建变量组

Question

在我正在开发的网站上，我们使用的是Scaffold，这是一个类似于 Sass 的基于 PHP 的系统。它还可以处理 Sass 函数\文件。不幸的是，该系统现在已弃用，我们正在寻找一种完全迁移到 Sass 的方法。 Scaffold 有一个很大的特性，虽然我没有找到移植到 Sass 的方法，即变量组。

Scaffold 中的变量可以分组并与点分隔标记一起使用。例如，我会将它们定义为：

@variables vargroup1{
    variable1: ####;
    variable2: ####;
    variable3: ####;
    variable4: ####;
}

然后在代码上使用，例如。

body{ width: vargroup1.variable1; margin: vargroup1.variable2 + 10;}

这对开发有很大帮助，因为您可以将系统中的变量组合在一起并阅读 CSS 文件，您可以轻松了解要引用的内容。我在 Sass 文档中没有找到类似的东西，有人知道这是否可能吗？或者如果无论如何使用 Mixins 来做到这一点？

谢谢

Answer 1

在 Sass 中没有等价物。但我可以考虑两种解决方法：

1) Sass lists 及其相关的list functions。

您的代码可能如下所示：

$variables = 40px 30px 20px 10px;

body {width: nth($variables, 1); margin: nth($variables, 2) + 10;}

这不一样，因为列表索引不能是字符串，所以你没有办法命名你的变量。

2) 定义自定义函数。查看 Sass 参考中的 Function Directives 部分

@function variables($variable_name) {
  @if ($variable_name == 'variable1') {
    @return 40px;
  } @else if ($variable_name == 'variable2') {
    @return 30px;
  }
}

body {width: variables('variable_1'); margin: variables('variable_2') + 10;}

这种方式不那么直观和丑陋，但您可以“命名变量”。

Answer 2

我使用zip 和index 遇到了this somewhat clunky solution（请参阅Chris Eppstein 的回复）。显然，SASS 的维护者添加了这些内置函数以响应类似的问题。

引用他的回复：

$border-names: a, b, c;
$border-widths: 1px, 1px, 2px;
$border-styles: solid, dashed, solid;
$border-colors: red, green, blue;
$borders: zip($border-widths, $border-styles, $border-colors);

@function border-for($name) {
   @return nth($borders, index($border-names, $name))
}

@each $name in $border-names {
  .border-#{$name} {
    border: border-for($name);
  }
}

会产生：

.border-a { border: 1px solid red; }
.border-b { border: 1px dashed green; }
.border-c { border: 2px solid blue; }

“命名变量”来自顶部的列表“-names”；然后，您使用该变量列表中所需变量名称的index 从另一个变量列表中获取第 n 个值。 zip 用于将单独的列表混合在一起，以便您可以同时从所有列表中检索相同的索引。将该行为包装在一个函数中可以更轻松地检索一个集合。

Answer 3

您可以以类似的方式使用 SASS 列表及其相关函数：

// List order: top, bottom, left, right, width, height, ...
$Header: 10px,auto,10px,auto,100%,50px;
$Footer: auto,0px,0px,auto,100%,20px;

@function getVar($variable,$name:top){
    $var_index:1;
    @if $name==bottom {
        $var_index:2;
    } @else if $name==left {
        $var_index:3;
    }
    // Continue de if else for each property you want.
    return nth($variable,$var_index);
}

这样调用类似：

getVar($Header,left)

应该返回Header 列表的左侧属性的值，但将其更改为getVar($Footer,top) 将返回“页脚组”（值的页脚列表）的顶部属性的值。

这适用于使用值的时间，但是定义，您必须遵循确切的顺序并且不能留下任何空值，我发现最接近空值的是#{''}，这意味着“空字符串与没有引号”，一个空值，但被添加到 CSS 中。