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');

这里顶部是margin-top，20px是距离，而margin是cssProperty，但是我得到以下错误

预期'：'在$ cssProperty- in赋值语句
之后

帮助我知道我错在哪里

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 mixin用于自定义css属性

1 个答案: