Question

我正在使用sass版本（v3.5.0.beta.2）。但插值不是在代码中为变量$ rect工作 .margin＃{$ marginKey}＃{$ marginValue}＃{$ RECT}

支持的主旨链接：https://gist.github.com/AnkitPandey007/6f0fa5b283ef38071b7347f9644cd95d

/**
  Margin class generation mixin
**/
@mixin marginClassGeneration($marginList){
  $rect:'rect';
  @each $marginKey, $value in $marginList{
    @each $marginValue in $value{
      @debug $marginValue;
      .margin#{$marginKey}#{$marginValue}#{$rect}{  /* $rect is not printing */ 
        margin-#{$marginKey}: $marginValue;
      }
    }
  }
}

，包括：

$marginList: (
        top:(-388px !important, -42px !important),
        right:(),
        bottom:(),
        left:(),
        margin: ()
);
@include marginClassGeneration($marginList);

输出：

.margintop-388px {   /*.margintop-388pxrect is required*/
  margin-top: -388px !important;
}

.margintop-42px {
  margin-top: -42px !important;
}

请帮助您了解如何获得所需的格式＆＃34; .margintop-388pxrect ＆＃34;

Answer 1

问题出在top:(-388px !important, -42px !important)，你不可能在那里重要。因为它会尝试将其视为价值。但是，如果您只是删除!important，它将按预期工作。

使用工作示例查看codepen：https://codepen.io/ivandoric/pen/VXZVJZ

$marginList: (
    top:(-388px, -42px),
    right:(),
    bottom:(),
    left:(),
    margin: ()
 );


@mixin marginClassGeneration($marginList){
  $rect:'rect';
  @each $marginKey, $value in $marginList{
    @each $marginValue in $value{
      @debug $marginValue;
      .margin#{$marginKey}#{$marginValue}#{$rect}{  
        margin-#{$marginKey}: $marginValue;
      }
    }
  }
}

@include marginClassGeneration($marginList);

如果你真的需要!important，你可以把它放在这一行：

margin-#{$marginKey}: $marginValue !important;

插值不适用于SASS版本（v3.5.0.beta.2）

1 个答案: