Question

On the site I’m working on we were using Scaffold, which is a PHP-based system similar to Sass. It also can process Sass functions\files. Unfortunately that system is now abandonware, and we are looking on a way to move completely to Sass. There is one big feature with Scaffold though that I’m not finding a way to port to Sass, the variable groups.

Variable in Scaffold can be organized in groups and used with a point-separated markup. For example I would define them as:

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

And later use on the code as, for example.

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

This helps development a lot, since you can group together variables from a system and reading the CSS files you can easily know what to reference. I didn’t find anything like that on the Sass documentation, anyone knows if it is possible? Or if there is anyway using Mixins to do this?

Thanks

Answer 1

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

1) Sass lists and its related list functions.

Your code could look like the following:

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

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

It’s not the same because list indexes can’t be strings, so you haven’t any way to name your variables.

2) Define a custom function. Look at Function Directives section in Sass reference

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

This way is less intuitive and uglier but you can ‘name your variables’.