1

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

Ryuu
  • 596
  • 1
  • 5
  • 26
  • Can you provide the *actual* code that reproduces this problem? All I see here is undefined variable. – cimmanon Feb 02 '16 at 13:56
  • It's sat inside a mixin with a parameter. Updated – Ryuu Feb 02 '16 at 14:14
  • I'm voting to close this as a typo, your mixin doesn't have a name. How were you intending on using it? – cimmanon Feb 02 '16 at 14:16
  • Editting on phone so forgot to add the name. My bad – Ryuu Feb 02 '16 at 14:18
  • I can't reproduce the problem then: http://www.sassmeister.com/gist/dc2cb9eca9c718bf4104 – cimmanon Feb 02 '16 at 14:26
  • Fair enough. I figured I had the syntax correct and, as confirmed by a colleague, the mixin works on his machine. The only difference between our setups is that his version of node-sass is 3.4.0 whereas mins is 3.4.1. I doubt that's the issue though – Ryuu Feb 02 '16 at 14:32

1 Answers1

1
@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;
}
Mike Mellor
  • 1,316
  • 17
  • 22