Search code examples
sassgulp-sasslibsass

SASS variable as style name

Is it possible to use a SASS variable in within a style name? If yes, what's the syntax?

I've tried the following:

@mixin bleed($direction) {
    margin-#{$direction}: 10px;
}

and

@mixin bleed($direction) {
    #{'margin-' . $direction}: 10px;
}

with no luck.

For reference, I'm using lib-sass and the error thrown is Unknown word

Solution 
  • @mixin margin($direction) {
    margin-#{$direction}: 10px;
}

    That works for me with the following call

    .margin-test{
    @include margin(right);
}

    Gives 

    .margin-test {
  margin-right: 10px;
}