在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

萨斯没有相应的东西.但我可以通过两种解决方法思考:

1) Sass列表及其相关列表功能.

您的代码可能如下所示:

$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

我碰到这个有点笨重的解决方案(见克里斯Eppstein的答复),使用zip和index.显然,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用于将列表分开,以便您可以同时从所有列表中检索相同的索引.在函数中包装该行为可以更轻松地检索集合.