Setting SASS Mixin Values to CSS Properties

When creating universal margin/padding mixins, it may be necessary to set CSS properties as mixin values. To achieve this, string interpolation is employed.

String Interpolation for CSS Properties

To use variables as CSS property names, string interpolation (#{$var}) is required.

Example

The following mixin demonstrates how to set CSS properties using string interpolation:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

Note

When using attribute selectors (*="_m"), it's important to consider the potential conflicts with other classes that contain "_mid" within their names.