Creating Variable Groups in Sass

Question

On the site I'm working on, we used Scaffold , which is a PHP-based system like Sass. It can also handle Sass \ files functions. Unfortunately, this system now refuses software, and we are looking at a way to completely switch to Sass. There is one big feature with Scaffold, although I do not find a way to pass Sass, groups of variables.

A variable in Scaffold can be organized in groups and used with dot separated markup. For example, I would define them as:

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

And later use a code such as.

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

This helps a lot, since you can group variables from the system and read CSS files that you can easily find out what needs to be referenced. I did not find anything like this in the Sass documentation, does anyone know if this is possible? Or if Mixins is used anyway?

thank

Answer 1

There is no equivalent in Sass. But I can think of two workarounds:

1) Sass lists and related list functions .

Your code might look like this:

$variables = 40px 30px 20px 10px;

body {width: nth($variables, 1); margin: nth($variables, 2) + 10;}

This is not the same because list indices cannot be strings, so you cannot name your variables.

2) Define a custom function. See the section "Function Directives" in the Sass Help

@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

(. ) 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 , . .

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)

left Header, getVar($Footer,top) "Footer Group" ( ).

, , , #{''}, "Empty String with no quotes", , CSS.