css 在Sass中创建变量组

qltillow  于 2023-02-10  发布在  其他
关注(0)|答案(4)|浏览(241)

在我工作的网站上,我们使用的是Scaffold,这是一个基于PHP的系统,类似于Sass。它也可以处理Sass函数\文件。不幸的是,该系统现在是废弃软件,我们正在寻找一种方法来完全转移到Sass。但有一个大的功能与Scaffold,我没有找到一种方法来移植到Sass,变量组。
Scaffold中的变量可以组织成组,并与点分隔的标记一起使用。例如,我将它们定义为:

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

并稍后在代码上使用,例如。

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

这对开发有很大帮助,因为你可以将系统中的变量组合在一起,阅读CSS文件,你可以很容易地知道引用什么。我在Sass文档中没有找到类似的东西,有人知道这是否可能吗?或者是否有任何使用Mixin来做这件事的方法?
谢谢

7bsow1i6

7bsow1i61#

我遇到了这个使用zipindex的有点笨拙的解决方案(见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用来将单独的列表混合在一起,这样你就可以同时从所有列表中检索相同的索引。将这种行为 Package 在函数中可以更容易地检索集合。

0x6upsns

0x6upsns2#

Sass中没有对应的函数,但我可以考虑两种变通方法:

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

这种方法不太直观,也不美观,但你可以“命名你的变量”。

4c8rllxm

4c8rllxm3#

您可以使用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中。

m4pnthwp

m4pnthwp4#

您可以使用scss/sassMap函数:

@use "sass:map";

$variables: (
    "variable1": ####;
    "variable2": ####;
    "variable3": ####;
    "variable4": ####;
}

body {
    width: map.get($variables, "variable1"); 
    margin: map.get($variables, "variable2") + 10;
}

Documentation

相关问题