CSS property as SASS mixin value [duplicate]

问题

This question already has answers here:

Using variables for CSS properties in Sass (2 answers)

Closed 3 years ago.

I try to build some universal margin/padding mixin...

This is my 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);
  }
}

Something is not right, so I wonder if it is possible to set some CSS property as a mixin value? Can anybody help?

回答1:

If you want to use variables as property names you need to use string interpolation - #{$var}.

So this should work:

[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

Just a note: for your attribute selectors ... *="_m" will also apply to the ones that have _mid in them (see here) ... so maybe you should rethink this a little.

来源：https://stackoverflow.com/questions/20050932/css-property-as-sass-mixin-value