css - 插值不适用于 SASS 版本 (v3.5.0.beta.2)

Question

I am using sass version (v3.5.0.beta.2). But interpolation is not working for variable $rect in the code .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;
}

请帮助如何获得所需的格式“.margintop-388pxrect”

Answer 1

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

查看带有工作示例的代码笔: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;