Question

我想创建一个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 */
    }
}

然后我想以这种方式使用我的mixin：

$num: 1;

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

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

这样只应用@include myTest(1) { ... }括号内的规则。

问题是我不知道该怎么做。

Answer 1

myTest检查$myVar变量的值，并通过@content应用已通过的css规则 - 请参阅documentation。

@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;
  }
}

Answer 2

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

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


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

Answer 3

你需要在你的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;
  }
}

https://codepen.io/anon/pen/YEJKRm

希望这会有所帮助

SASS mixin在我们调用时会应用一些规则

3 个答案: