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 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

我使用this somewhat clunky solution和zip找到index（请参阅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; }

命名你的变量＆＃34;来自列表＆＃34; -names＆＃34;在顶部;然后，使用该变量列表中所需变量名称的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列表的left属性的值，但将其更改为getVar($Footer,top)将返回“页脚组”的top属性的值（页脚值列表）

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

在Sass中创建变量组

3 个答案: