5

是否可以让 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 中拥有一个 mixin，我可以@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');
    }
  }
}

这有可能吗？

4

2 回答 2

5

在这里找到了答案。

可以使用 & 符号。作为参考，在这种情况下所需的 mixin 是

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

这可以通过以下方式使用：

.image {
  background-image: url('some.png');
  @include svg-supported {
    background-image: url('some.svg');
  }
}
于 2013-10-24T10:22:18.280 回答
0

对于那些通过搜索看到这一点的人，我想改进@RJo 的答案，以添加对此 mixin 的根包含的支持：

@mixin svg-supported {
  $parent-selector: &;
  @at-root html.svg #{$parent-selector} {
    @content;
  }
}

这样，即使您在文件的根目录中包含 mixin，它也可以工作，如下所示：

@include svg-supported {
  background-image: url('some.svg');
}
于 2022-01-29T12:04:16.840 回答