CodeRecipez/mixins_w_expressions_in_selectors_property_names_interpolation.md

## mixins_w_expressions_in_selectors_property_names_interpolation.md

      
    Raw
  

              mixins_w_expressions_in_selectors_property_names_interpolation.md
            
          
    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

  
## 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);
	$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);