How do you set CSS properties as mixin values in SASS using string interpolation?

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:

<code class="scss">[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);
  }
}</code>

Note

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

The above is the detailed content of How do you set CSS properties as mixin values in SASS using string interpolation?. For more information, please follow other related articles on the PHP Chinese website!