css - 在Sass中创建变量组

在我正在工作的网站上，我们使用的是Scaffold，它是一个类似于Sass的基于PHP的系统。它还可以处理Sass函数\文件。不幸的是，该系统现在已经废弃了，我们正在寻找一种完全迁移到Sass的方法。 Scaffold有一个重要功能，尽管我没有找到移植到Sass变量组的方法。

脚手架中的变量可以分组组织，并与点分隔标记一起使用。例如，我将它们定义为:

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

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

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

由于您可以将系统中的变量组合在一起并读取CSS文件，因此可以轻松地知道要引用的内容，因此这对开发很有帮助。我在Sass文档中没有找到类似的东西，有人知道这是否可能吗？还是如果有人使用Mixins来做到这一点？

谢谢

最佳答案

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

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

关于css - 在Sass中创建变量组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9779794/