Question

我有2个div

  <div class="first-div"></div>
   <div id="second-div"></div>

现在我使用scss定义了一个mixin，用于边框

@mixin border($thickness, $border-type, $color){ border:$thickness $border-type $color;}

这个mixixn本身就嵌套在另一个像这样的

中

@mixin NestOtherMixins{
 @include border(2px, solid, red);
}

我将这个mixin（NestOtherMixins）包含在类和id中，每个类都以div为目标，但这里是我想在应用mixin时应用不同颜色的技巧，所以带有class属性的div会说红色，身份证会是蓝色的。这样做

.first-div{
@include NestOtherMixins;
 }
#second-div{
@include NestOtherMixins;
 }

只会为两个div产生相同的颜色。我将隔离mixins的一些建议和我将能够控制边界的变量，但是我想知道我可以将边界mixin嵌套在另一个中并且当应用于不同的类或ID时可以控制变量？

Answer 1

您无法更改变量/属性的值，具体取决于它们分配给哪种选择器。虽然你可以在mixin中传递一个参数来为你做这个选择。

.foo {
  @include test-mixin('foo');
}

.bar {
  @include test-mixin('bar');
}

 @mixin test-mixin($value) {

   @if $value == 'foo' {
     //do foo
   } @else if $value == 'bar' {
     //do bar
   }
}

带有流体参数的嵌套mixins

1 个答案: