Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Mixins w/expressions in Selectors and Property Names (interpolation)

You can use SassScript variables in selectors and property names using #{} interpolation syntax.

It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.

mixins_w_expressions_in_selectors_property_names_interpolation.scss

$class-name: over-qualified-selector;
$css-attribute: border;
@mixin test-mixin($name, $attribute) {
p.#{$name} {
#{$attribute}-color: blue;
}
}
@include test-mixin($class-name, $css-attribute);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment