0

次のサス：

@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

素晴らしいでしょうが、明らかに機能しません。これはまったく可能ですか？

4

1 に答える 1

1

両方を行う mixin を持つことはできません。2 番目のコード セットを生成するために必要な 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);
}
于 2013-06-10T23:24:47.870 に答える