Question

我一直在努力为这个问题制作一个连贯的混音。我正在使用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 ...... 感谢

Answer 1

我认为简单的嵌套在这里应该足够好了，为什么你需要使用mixins和继承来实现所有这些复杂性？

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

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

1 个答案: