Расширение вложенного класса для использования с modernizr и т. Д.

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

Идея состоит в том, что я могу вызвать mixin из структуры css ... Спасибо

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