Question

我正在尝试在占位符内使用带有参数的mixin。想法是使用一行代码来选择类中的特定占位符。实际上，我不知道是否还有另一种更好的方法可以执行此操作，也许可以使用函数或其他方法。我正在学习Sass，所以我想尝试。

HTML

<div class='wrap'>
  <div class='box'></div>
  <div class='box'></div>
</div>

SCSS

// VAR
$size-xs: 30px;
$size-s: 50px;
$size-m: 70px;

$color-1: orange;
$color-2: rgb(34,139,86);

@mixin box($val) {
  %box-one {
    width: $size-s;
    height: $size-s;
    background: $color-1;
    margin: auto;
    border-radius: 6px;
  }
  %box-two {
    width: $size-s;
    height: $size-s;
    background: $color-2;
    margin: auto;
    border-radius: 6px;
  }
  .box {
    @extend #{$val} !optional;
  }
}

.wrap {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  @include box(box-one);
}

谢谢！

Answer 1

当前，您的代码无法正常工作，因为您忘记在%之前放置#{$val}：

.box {
  @extend %#{$val} !optional;
}

无论如何，将占位符选择器放在mixin中不是一个好主意，因为每次调用mixin时，您都在创建新的选择器。这意味着例如添加以下内容：

.randomSelector {
  @include box(box-one);
}

您将获得：

.wrap .box { ... }
.randomSelector .box { ... }

代替：

.randomSelector .box, .wrap .box { ... }

因此，我建议您将%box-one和%box-two外部化。

最后一件事，如果这两个类之间的唯一区别是background属性，也许使用单个类对commons属性进行重新组合将是更好的优化方法：

.box {
  width: $size-s;
  height: $size-s;
  margin: auto;
  border-radius: 6px;
}

%box-one {
  background: $color-1;
}

%box-two {
  background: $color-2;
}

@mixin box($val) {
  .box {
    @extend %box-#{$val} !optional;
  }
}

.wrap {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  @include box(one);
}

如果您有更多的盒子样式，您甚至可以动态创建占位符：

$boxStyles: (
  one: $color-1,
  two: $color-2
);

@each $box, $style in $boxStyles {
  %box-#{$box}  {
    background: $style;
  }
}

@mixin通过使用参数选择特定的占位符

1 个答案: