scss 用于自定义 css 属性的 mixin

Question

@mixin genericSidesStyles ($sides, $style, $cssProperty) {
  @if($sides == '') {
    $cssProperty: $style;
  }
  @else {
    @each $side in $sides {
      @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) {
         $cssProperty-#{$side}: $style;
       }
     }
  }
}

这是一个 scss mixin，用于为 css 属性提供样式，边距、填充、边框等。

我如下调用我的 mixin

@include genericSidesStyles('top', 20px, 'margin');

这里的 top 是 margin-top，20px 是距离，margin 是 css属性但我得到以下错误

expected ':' after $cssProperty- in assignment statement

帮我看看哪里错了

Answer 1

您需要插入 $cssProperty 变量（因此它变为 #{$cssProperty}，就像您对 $side 变量所做的一样。因此您的最终代码应该是：

@mixin genericSidesStyles ($sides, $style, $cssProperty) {
  @if($sides == '') {
    #{$cssProperty}: $style;
  }
  @else {
    @each $cssProperty, $side in $sides {
      @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) {
         #{$cssProperty}-#{$side}: $style;
       }
     }
  }
}

scss 用于自定义 css 属性的 mixin

scss mixin for custom css properties

css

sass

mixins