Css SASS mixin在我们调用它时应用了一些规则

我想创建一个SASS/LESS mixin，询问变量是否等于某个值，然后应用一些CSS规则

@mixin myTest($myVar: $num) {
    @if ($myVar == $num) {
      /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */
    } @else {
      /* Do nothing */
    }
}

然后我想这样使用我的混音器：

$num: 1;

@include myTest(1) {
    h1 {
       color: blue;
       background: red;
    }
}

@include myTest(2) {
    h1 {
       color: yellow;
       background: green;
    }
}

因此，只应用

@include myTest（1）{…}

括号内的规则

---

问题是我不知道怎么做。

我不确定我是否完全理解了你的问题，但你需要做的似乎是将CSS规则移动到mixin中：

@mixin myTest($num) {
    @if $num === 1 {
       color: blue;
       background: red;
    } @else {
       color: yellow;
       background: green;
    }
}


$num: 1;
h1 {
  @include myTest($num);
}

---

你需要在你的mixin中使用@content来让mixin中的每一样东西都被推送出去

$num: 1;
@mixin myTest($myVar: $num) {

    @if ($myVar == $num) {
      /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */
      @content; // this is how you get it in here
    } @else {
      /* Do nothing */
    }
}

@include myTest(1) {
  h1 {
    background:red;
  }
}

@include myTest(2) {
  h1 {
    background:blue;
  }
}

---

希望这有助于检查

$myVar

变量的值，并通过

@content

应用传递的css规则-请参阅

---

您的实现是标准的，其中规则在mixin的声明中。然而，我想在调用mixin时应用这些规则。

@mixin myTest($myVar: $num) {
  @if ($myVar= $num) {
    @content;
  }
}

$num: 1;

@include myTest(1) {
  h1 {
    color: blue;
    background: red;
  }
}

@include myTest(2) {
  h1 {
    color: yellow;
    background: green;
  }
}