How can I Use CSS Property Values as SASS Mixin Parameters?

Using CSS Property Values as SASS Mixin Parameters

In an attempt to create a universal margin/padding mixin, you encountered an issue involving setting CSS properties as mixin values. This article aims to resolve this issue by exploring the use of string interpolation in SASS mixins.

To set CSS property values as mixin values, you need to utilize string interpolation. This technique enables you to embed variables as property names within mixin definitions.

Here's an updated version of your code that incorporates 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);
  }
}

The #{$val} syntax within the mixin definition allows you to dynamically set the CSS property name.

Note:

• Attribute selectors like *="_m" may also apply to elements that contain "_mid" in their class names. This might prompt you to rethink your naming strategy.
• String interpolation is crucial for using variables as property names within mixin definitions.

The above is the detailed content of How can I Use CSS Property Values as SASS Mixin Parameters?. For more information, please follow other related articles on the PHP Chinese website!