css - Sass mixin 应用于类

Question

以下 Sass:

@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 来生成，请注意 .cost 和 .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);
}