在css选择器括号外混合使用sass中的@if语句？

Question

我在获得@if语句时遇到了困难，在@mixin中也是如此。

这个mixin基本上是在模拟一个‘如果小于或等于’ie语句，因为我使用php来填充body类。

// less than or equal too mixin
@mixin lte-ie($ver:'9') {
  @if $ver >= '9' { .ie-9 &, }
  @if $ver >= '8' { .ie-8 &, }
  @if $ver >= '7' { .ie-7 &, }
  .ie-6 &
  {
    @content;
  }
}

但是混音失败了，当我尝试运行它时，我会得到这个错误。

无效的CSS在"...f $ver >= '9‘{：预期的“}之后，是第20列第9行的”..ie 9 &，}“。

我做了一个萨斯迈斯特，但我不得不对@mixin进行评论，因为你救不了一个破碎的要点。但是您可以取消注释来测试上面的代码:)

http://www.sassmeister.com/gist/7bbd084be7e12845866311a6ddbf0cdf

任何帮助都将不胜感激。

Answer 1

现在少做一些扩展如何，而您想出更有效的解决方案(另一方面，因为它是预处理器的一部分，所以您不需要对其进行完美的优化)。

@mixin lte-ie($ver:9) {
  @if $ver >= 9 { 
    .ie-9 &, .ie-6 & {
      @content;
    }
  }
  @if $ver >= 8 { 
    .ie-8 &, .ie-6 & {
      @content;
    }
  }
  @if $ver >= 7 { 
    .ie-7 &, .ie-6 & {
      @content;
    }
  }
  @if $ver > 7 {
    .ie-6 & {
        @content;
      }
  }
}

HEADER {
  overflow: hidden;

  @include lte-ie(9) {
    position: relative;
  }
}