Question

是否可以将SASS mixin添加到选择器前面？我使用Modernizr来检查浏览器的svg功能。当支持svg时，它会将svg类输出到<html>元素。

我希望background-image根据svg功能进行更改。基本上，这就是我需要的：

.container .image { background-image: url('some.png'); }
html.svg .container .image { background-image: url('some.svg'); }

我希望在我的SCSS中有一个混合，我可以通过以下方式@include：

.container {
  .image {
    background-image: url('some.png');
    @include svg-supported {
      background-image: url('some.svg');
    }
  }
}

而不是写：

.container {
  .image {
    background-image: url('some.png');
  }
}

@include svg-supported {
  .container {
    .image {
      background-image: url('some.svg');
    }
  }
}

这有可能吗？

Answer 1

找到答案here。

可以使用＆符号＆amp;标志。作为参考，在这种情况下所需的mixin是

@mixin svg-supported {
  html.svg & {
    @content;
  }
}

可以通过以下方式使用：

.image {
  background-image: url('some.png');
  @include svg-supported {
    background-image: url('some.svg');
  }
}

Sass mixin以前置于选择器

1 个答案: