css - Sass mixin 应用于类

Question

以下萨斯：

@mixin colourCount
  .one
    background: rgba(0, 160, 0, 0.5)
  .two
    background: rgba(255, 255, 0, 0.6)

.count
  @include colourCount

.cost
  @include colourCount

生成 CSS：

.count .one {
  background: rgba(0, 160, 0, 0.5);
}
.count .two {
  background: rgba(255, 255, 0, 0.6);
}

.cost .one {
  background: rgba(0, 160, 0, 0.5);
}
.cost .two {
  background: rgba(255, 255, 0, 0.6);
}

Sass 是否可以重用 mixin 来生产，请注意.costand之间没有空格.one：

.count .one {
  background: rgba(0, 160, 0, 0.5);
}
.count .two {
  background: rgba(255, 255, 0, 0.6);
}

.cost.one {
  background: rgba(0, 160, 0, 0.5);
}
.cost.two {
  background: rgba(255, 255, 0, 0.6);
}

就像是：

.cost @include colourCount

会很棒，但显然不起作用。这可能吗？

Answer 1

你不能有一个可以同时做这两个的mixin，不。生成第二组代码所需的 mixin 如下所示：

@mixin colourCount {
  &.one {
    background: rgba(0, 160, 0, 0.5)
  }
  &.two {
    background: rgba(255, 255, 0, 0.6)
  }
}

实际上，无论如何，您都希望将其@extend用于此目的。

%colours {
  &.one {
    background: rgba(0, 160, 0, 0.5)
  }
  &.two {
    background: rgba(255, 255, 0, 0.6)
  }
}

.foo {
  @extend %colours;
}

.bar {
  .one {
    @extend %colours.one;
  }

  .two {
    @extend %colours.two;
  }
}

生成：

.one.foo, .bar .one {
  background: rgba(0, 160, 0, 0.5);
}
.two.foo, .bar .two {
  background: rgba(255, 255, 0, 0.6);
}