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

Question

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

div.myPanel {
.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; } 

Есть ли лучший способ уменьшить d Дублировать подобный код кнопки

div.myPanel 

{
.btn { размер шрифта: 9px; }

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

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