Менее вложенные пространства имен?

Question

Итак, у меня есть немного Меньше

#footer {
    ul {
        // stuff
    }
    li {
        // stuff
    }
}

все хорошо содержится в #footer, но я хочу добавить префикс #footer. Как бы я поставил перед футером такой класс, как .ie6 или .ie7, но в пределах менее "замыкания" #footer?

например, я хочу сделать это (соблюдайте псевдосинтаксис> .ie6,> .ie7):

#footer {
    <.ie6, <.ie7 {
        // ie6/7 stuff
    }
    ul {
        // stuff
    }
    li {
        // stuff
    }
}

и он сгенерирует это:

.ie6 #footer,
.ie7 #footer {}

#footer {}
#footer ul {}
#footer li {}

Есть идеи, как этого добиться с помощью Less?

Answer 1

Думаю, это может вас заинтересовать: https://github.com/cloudhead/less.js/pull/268#issuecomment-1207479

То, что вы хотите сделать, пока невозможно в мастере less.js. Но парень, Джеймс Фостер, разветвил его и добавил эту функцию.

Пример:

#box {
    #other-box {
        margin: 10px 0 0;

        .ie7 & {
            margin: 5px 0 0;
        }
    }
}

Answer 2

Я не верю, что возможно поместить класс перед #footer, если вы не завернули все в .ie6/7 вместо #footer

. Меньше веб-сайта показывает следующий пример:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Который, я думаю, является единственным способом достижения того, что вы хотите, поэтому:

    #footer {
    .ie6{
        // ie6 stuff
    }
    .ie7{
       //ie7 stuff
    }
    ul {
        // stuff
    }
    li {
        // stuff
    }
    }

Будет генерироваться с классами после идентификатора, я не могу найти способдостичь того, что вы хотите, не вкладывая все в .ie6/7