How to Use CSS Properties as SASS Mixin Values: A Guide to String Interpolation

Using CSS Properties as SASS Mixin Values

In an attempt to create a versatile margin/padding mixin, you've encountered a snag in SASS. Let's delve into the problem you described and find a solution together.

Setting CSS Properties in Mixins

Your code attempts to set CSS properties (margin and padding) within SASS mixin values. However, there's a key issue: CSS properties cannot be used as mixin values directly. Instead, you need to employ a technique called "string interpolation" to include variables as property names.

Using String Interpolation

String interpolation allows you to insert variable values into strings using the #{$variable} syntax. This helps you set CSS properties dynamically based on variables within mixins.

Here's how you can modify your code to utilize string interpolation:

<code class="sass">[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 on Attribute Selectors

It's important to note that the attribute selector you're using (*="_m") will also match elements with "_mid" in their class names. This might not be the behavior you intended, so consider revising your attribute selector accordingly.

The above is the detailed content of How to Use CSS Properties as SASS Mixin Values: A Guide to String Interpolation. For more information, please follow other related articles on the PHP Chinese website!