用于自定义 CSS 属性的 scss mixin答案

【问题标题】：scss mixin for custom css properties用于自定义 CSS 属性的 scss mixin
【发布时间】：2017-04-14 17:48:52
【问题描述】：

@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 是 cssProperty 但我收到以下错误

赋值语句中 $cssProperty- 之后的预期为 ':'

帮助我知道我在哪里错了

【问题讨论】：

我测试了你的 mixin，它似乎没有通过 @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) 条件。删除 @each 循环（不知道为什么需要它）&它应该可以正常工作。还将您的声明更改为#{$cssProperty}-#{$side}: $style
@NikhilNanjappa 我相信循环是允许多个 $sides 因此可以通过将两个值作为 $sides 的列表传递来同时创建 margin-top 和 margin-bottom 的属性。
现在应该开始工作了，您已经通过从 @each 语句中删除 $cssProperty 来编辑您的答案 - 您需要做的就是将语句 $cssProperty-#{$side}: $style; 更改为 #{$cssProperty}-#{$side}: $style;

标签： css sass mixins

【解决方案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;
       }
     }
  }
}

【讨论】：

感谢 edmund，但 @each 行中不需要 cssProperty 我错误地发布了它，感谢您的帮助