Question

所以，我想创建一个条件sass类，它接受一个参数并根据该参数创建一个类。我甚至不确定这会被称为什么。例如：

<img class="width-200" .../>

我会创建某种类型的混合，它会在' - '之后接收值，然后吐出宽度：[input] +'px;'。

在SASS有类似的东西吗？我甚至会打电话来问正确的问题？

Answer 1

如果我理解正确，那么我认为这就是你要找的。您可以创建一个简单的mixin来根据变量创建一个类或属性，并且如注释中所提到的，您可以循环遍历地图以创建一系列类。

// mixin that outputs a class
@mixin width-class($width) {
  .width-#{$width} {
    width: #{$width}px;  
  }
};

@include width-class(234);
// .width-234 {
//    width: 234px;
// }


// mixin that outputs an attribute
@mixin width-attr($width) {
    width: #{$width}px;
};

div {
  @include width-attr(567);  
}
// div {
//   width: 567px;
// }


// Loop using a mixin with a map to create classes
$width-map: (
  100,
  200,
  300,
  400
);

@each $width in $width-map {
  @include width-class($width);
}
// .width-100 {
//   width: 100px;
// }
// .width-200 {
//   width: 200px;
// }
// .width-300 {
//   width: 300px;
// }
// .width-400 {
//   width: 400px;
// }

Sass条件输入mixin

1 个答案: