SASS Variable within string

Question

Hi all I'm new to SASS (late I know) and playing around with mixins.

Basically is there a way to link a variable to a string here is what I'm trying to do but it throws errors. (This is a condensed version)

@mixin post-link ($class, $color, $hover) {
    a.$class:link {
        color: $color;
    }
    a.$class:hover {
        color: $hover;
    }
}

Link I say this is a little simpler than what I am trying to do in the mixin (more variables in full one).

EDIT: should add i'm using Compass. Thanks

score 65 · Accepted Answer · answered Mar 13 '14 at 17:40

Yes, you just have to use variable interpolation. Example:

@mixin post-link ($class, $color, $hover) {
    a.#{$class}:link {
        color: $color;
    }
    a.#{$class}:hover {
        color: $hover;
    }
}

Example on SassMeister: http://sassmeister.com/gist/9533103

The key is adding #{ and } around your variable names to get them expanded.

SASS Variable within string

1 Answers1