Question

使用带有占位符选择器的mixin来实现使用类前缀的能力的最佳方法是什么？

为了详细说明，假设我有一个具有3种尺寸的box类，但是我想选择使其具有不同的颜色。

我的基类为：

.box
.box-md
.box-sm

如果我希望任何基类框为绿色，则可以这样指定：

.box-green
.box-md-green
.box-sm-green

我怎样才能尽可能地采用DRY方法？

类似于此答案，但使用混合和占位符扩展：SCSS, how to @extend Nested ampersand "prefix"?

到目前为止，这是我整理的内容（无效）

HTML：

<div class="box"></div>
<div class="box-green"></div>
<div class="box-sm"></div>
<div class="box-sm-green"></div>

CSS（SCSS）：

// Main style placholder as mixin
@mixin box {
  height: 300px;
  width: 300px;
  margin: 20px;
  display: inline-block;
  background-color: blue;

  &-green {
    background-color: green;
  }
}

// Placeholders
%box {
  @include box;
}

%small-box {
  @include box;

  width: 100px;
  height: 100px;
}


// Class Definition
.box { @extend %box; }

.box-sm { @extend %small-box; }

笔：https://codepen.io/Aricha_MW/pen/xxKZWbV

Answer 1

这不是一个完整的答案，但确实可以解决该问题：

我们的拥护者是@at-root指令和此处的插值。该解决方案需要同时使用mixins和占位符选择器，并且有些混乱。

如果我们设置占位符选择器样式：

%box {
  height: 300px;
  width: 300px;
  margin: 20px;
  display: inline-block;
  background-color: blue;
}

%small-box {
    @extend %box;
    width: 100px;
    height: 100px;
}

然后我们可以让mixins为我们完成其余的工作。

首先，我们为所需的变体定义我们的混合：

 @mixin green-bg($selector, $root) {
  // Takes element out of any nesting
  // Then we interpolate our argument variables 
  @at-root{
    #{$root}-green {
      // We can't set a placeholder as an argument so we'll just borrow the string and append the placeholder definer '%'
      @extend %#{$selector};
      background-color: green;
    }
  }
}

然后我们定义我们的mixins，这将有助于我们定义我们的类

@mixin box($parent) {

    @extend %box;

    @include green-bg(box, #{$parent});
}

@mixin small-box($parent) {

    @extend %small-box;

    @include green-bg(small-box, #{$parent});
}

当我们定义类时，它们看起来会很干净：

.box { @include box(&); }

.box-sm { @include small-box(&); }

这是最终产品的实际效果：https://codepen.io/Aricha_MW/pen/oNvxjEw

编辑：08/15/2019-更干净的版本在这里： https://codepen.io/Aricha_MW/pen/mdbPVXY

Sass mixin，带有嵌套的＆前缀

1 个答案: