Question

我想生成一组看起来像这样的类：

.mr-s{
 margin-right: $space-s;
}

.mr-m{
 margin-right: $space-m;
}

.ml-s{
 margin-left: $space-s;
}

.ml-m{
 margin-left: $space-m;
}

所以我试图为此创建一个mixin，但编译失败了：

 $space-s: 0.8rem;
 $space-m: 1rem;
 $space-l: 2.4rem;

$margin-sizes: s m l;
@mixin margins($direction) {
  @each $size in $margin-sizes{
    .m#{$direction}-#{$size} {
        margin-#{$direction}: $space-#{$size};
  }
}

是否可以动态创建变量名称（$ space-s，$ space-m）？
即使我使用固定值

Answer 1

请记住，如果您将$符号放入单词，则会将其转换为变量，因此，如果您将该单词的元素分开，并将$添加到与其他单独分隔的单个部分中如果有空间，它们将成为不同的元素。

属性不会发生同样的情况，因为您加入或倾斜的是字符串。

$space-s: 0.8rem;
$space-m: 1rem;
$space-l: 2.4rem;

$margin-sizes: s m l;

@mixin margins($direction) {
  @each $size in $margin-sizes{
    .m#{$direction}-#{$size} {
            margin-#{$direction}:$space-s;            
    }
        .m#{$direction}-#{$size} {
            margin-#{$direction}:$space-m;            
    }
        .m#{$direction}-#{$size} {
            margin-#{$direction}:$space-l;            
    }
    }
}

.myclass{
    @include margins(right);
}

结果将是：

.class .mright-s {
  margin-right: 0.8rem;
}
.class .mright-s {
  margin-right: 1rem;
}
.class .mright-s {
  margin-right: 2.4rem;
}
.class .mright-m {
  margin-right: 0.8rem;
}
.class .mright-m {
  margin-right: 1rem;
}
.class .mright-m {
  margin-right: 2.4rem;
}
.class .mright-l {
  margin-right: 0.8rem;
}
.class .mright-l {
  margin-right: 1rem;
}
.class .mright-l {
  margin-right: 2.4rem;
}

sass mixin用于生成课程

1 个答案: