扩展嵌套类以与modernizr等一起使用答案

【问题标题】：Extending a nested class to use with modernizr etc扩展嵌套类以与modernizr等一起使用
【发布时间】：2010-12-17 21:21:29
【问题描述】：

我一直在努力为这个问题制作一个连贯的 mixin。我正在使用modernizr.js 来检测功能，并且为了保持我的样式表精简，我一直在尝试将类推出嵌套结构并扩展modernizr 放入的类。我应该补充一点，我也在使用 Compass 来获得额外的功能。

我希望实现的是：

.csstransitions, .csstransitions div, .csstransitions .some-class{
  -moz-transition-property: background;
  -webkit-transition-property: background;
  -o-transition-property: background;
}

到目前为止我有这个，但它坏了：

.csstransitions{
    @include transition-property(background-image);
}
@mixin csstransitions($element:"div"){
    @extend .csstransitions(nest(".csstransitions",$element));
}

我的想法是我可以从 css 结构中调用 mixin... 谢谢

【问题讨论】：

标签： css sass

【解决方案1】：

我认为简单的嵌套在这里就足够了，为什么你需要混合和继承的所有这些复杂性？

@import "compass/css3";
div {
  background-image: url(/images/foo.png);
  .csstransitions & {
    @include transition-property(background-image);
  }
}

这将为您提供以下输出：

div {
  background-image: url(/images/foo.png);
}
.csstransitions div {
  -moz-transition-property: background-image;
  -webkit-transition-property: background-image;
  -o-transition-property: background-image;
  transition-property: background-image;
}

但据我所知，您甚至根本不需要这个范围。浏览器将忽略它不理解的任何属性。所以我建议如下：

@import "compass/css3";
div {
  background-image: url(/images/foo.png);
  @include transition-property(background-image);
}

【讨论】：