How Can I Use CSS Properties as SASS Mixin Values?

CSS Property as SASS Mixin Value

When creating universal margin/padding mixins in SASS, you may encounter a concern about setting CSS properties as mixin values. The provided code snippet is an attempt to accomplish this task. However, certain modifications are necessary to make it fully functional.

Solution:

The key to resolving this issue lies in string interpolation. By utilizing the #{$var} notation, one can use variables as property names.

Corrected Code:

[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);
  }
}

DEMO:

This correction ensures that the CSS property (margin or padding) can be dynamically set based on the mixin's parameter.

Note:

For the attribute selectors ...*="_m", it is worth considering that this selector will apply to all elements containing "_m" in their class name, including those with "_mid" as well. Thus, it may require some re-evaluation and adjustment to achieve the desired specificity.

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