Question

Is it possible to render arbitrary strings in scss? You can render property values:

/*source scss*/
$some-color: #123456;
a {color: $some-color;}

/*compiled css*/
a {color: #123456;}

or selectors/property names using #{} interpolation syntax:

/*source scss*/
$some-class: 'my-awesome-link';
$some-attribute: border;
a.#{$some-class} {#{$some-attribute}-color: #000;}

/*compiled css*/
a.my-awesome-link {border-color: #000;}

but I can’t use the following:

/*source scss*/
$some-css: 'text-decoration:none;color:#000';
a {$some-css}  //breaks
a {#{$some-css}}  //breaks

This seems like vanilla string processing and something extremely trivial to allow. Am I overlooking a different syntax, or is it not possible in current scss?

Answer 1

The closest you can get to what you want is like this:

@mixin property-list($list) {
    @each $i in $list {
        #{nth($i, 1)}: nth($i, 2);
    }
}

$links: color red, border (1px solid);

a {
    @include property-list($links);
}

Compiles to:

a {
  color: red;
  border: 1px solid;
}