Вложенные объекты в SASS

Question

В Sass, если у меня есть такой код

div.myPanel {<br> .btn button, .toolbar { td, span { font-size: 9px; } } }

Я получаю что-то вроде этого

div.myPanel .btn button td, div.myPanel .btn button span, div.myPanel .toolbar td, div.myPanel .toolbar span { font-size: 9px; }

Но на самом деле я хочу

div.myPanel .btn button, div.myPanel .toolbar td, div.myPanel .toolbar span { font-size: 9px; }

Есть ли лучший способ уменьшить дублирующийся код, как этот

div.myPanel

{
кнопка .btn { размер шрифта: 9 пикселей; }

.toolbar
{
    td, span
    {
        font-size: 9px;
    }
}

} * * тысяча двадцать-один

Answer 1

Я бы предложил небольшую настройку для вашей второй формы, включая дважды селектор .toolbar, так что вы пишете фактическое правило только один раз:

div.myPanel {
  .btn button, .toolbar td, .toolbar span {
    font-size: 9px;
  }
}

Для более подробных случаев этого выследует проверить @extend.В принципе, если у вас есть класс, подобный следующему:

.base9 { font-size: 9px; }

Затем вы должны преобразовать свой второй пример выше во что-то подобное, но обратите внимание, что редактируемый стиль все еще в одном правиле:

div.myPanel {
  .btn button {
    @extend .base9;
  }
  .toolbar {
    td, span {
      @extend .base9;
    }
  }
}

#someUnrelatedElement small {
  @extend .base9;
}

Расширяйте работу, просто сворачивая селекторы в одно правило (как вы ищете), так что это отлично подходит для производительности в подобных случаях.