首页 文章

在Sass中创建变量组

提问于
浏览 次
5

在我正在研究的网站上，我们使用的是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这样做？

谢谢

css sass

3 回答

  • 5

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

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

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

    回复于
  • 0

    我使用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：红色，绿色，蓝色;
    $ borders：zip（$ border-widths，$ border-styles，$ border-colors）;

    @function border-for（$ name）{
    @return nth（$ borders，index（$ border-names，$ name））
    }

    @ border-names中的@each $ name {
    .border - ＃{$ name} {
    border：border-for（$ name）;
    }
    }
    会产生：.border-a {border：1px solid red; }
    .border-b {border：1px dashed green; }
    .border-c {border：2px solid blue; }

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

    回复于
  • 5

    你可以在类似的方式上使用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) 将返回"Footer Group"（页脚值列表）的top属性的值 .

    这适用于使用值的时间，但是一个定义，你必须遵循确切的顺序并且不能留下任何空值，最接近我找到的空值 #{''} 什么意思"Empty String with no quotes"，一个空值，但是被添加到CSS .

    回复于

相关问题