Есть ли способ группировать селектор?

Question

Я пытаюсь обратиться ко всем div, table, ul, dl и т. Д. Дети селектора, используя МЕНЬШЕ.

Я хотел бы написать что-то вроде этого.

.myclass { 
    ... 

    &.otherClass > (div, ul, dl, table) { 
    // define some rules... 
    } 
} 

Я ожидал бы следующего вывода.

.myclass.otherClass > div, 
.myclass.otherClass > ul, 
.myclass.otherClass > dl, 
.myclass.otherClass > table { 
    // rules 
} 

Но скобка кажется, не поддерживается, так как она составляет, как есть, в результате чего неверный CSS конечно.

Есть ли какой-либо синтаксис или другой способ иметь такой ярлык в определениях?

Answer 1

Ваше решение:

.myclass { 
    ... 

    &.otherClass { 
    > div, > ul, > dl, > table { 
     // define some rules... 
    } 
    } 
} 

---

Как за ваш комментарий, убрав селектор > после первого селектора, будет производить другой результат:

Этот пример

div { 
    > span, p, a { 
    border:1px solid #333; 
    } 
} 

компилируется в

div > span, div p, div a { 
    border: 1px solid #333; 
} 

в то время как в этом примере

div { 
    > span, > p, > a { 
    border:1px solid #333; 
    } 
} 

компилируется в

div > span, div > p, div > a { 
    border: 1px solid #333; 
} 

Answer 2

Другое решение аналогично ответу Ренди, это использовать переменную для .otherClass и >:

@selector: .otherClass >; 

.myclass { 
    display:block; 
    &@{selector} { 
    div, ul, dl, table { 
     color:red 
    } 
    } 
}