2014-10-16 3 views
0
div .mymixin('red','green')  
.mymixin(@a, @b){ 
    a { 
    color: @a; 
    span { 
     color: @b; 
    } 
    } 
} 

Этот код будет производить следующий CSS:набор родительского селектора в качестве переменной

div a{color:red;} 
div a span{color: green;} 

Мне нужно это, чтобы произвести это:

div a{color:red;} 
div:not(.open) a span{color: green;} 

Я пытался сделать что-то вроде этого:

div .mymixin('red','green')  
@parent: &; 
.mymixin(@a, @b){ 
    a { 
    color: @a; 
    @{parent}:not(.open) span { 
     color: @b; 
    } 
    } 
} 

Но это не работает правильно, prod ucing

div a &:not(.open) span{color:green;} 

Есть ли способ, чтобы назначить родителя переменной или сделать его другим способом, чтобы добиться того, что я после?

Спасибо.

P.S. Вот фактическая вложенность у меня есть:

.icfld(@name, @width, @height, @opacity, @open) { 
    > a { 
    ... 
    > .icon { 
     ... 
    } 
    &.disabled > .icon { 
     ... 
    } 
    //&:not(.open) :not(.disabled):hover... will NOT work, because & at this point refers to 
    //"parent" > a and makes it "parent" > a:not(.open), while I need "parent":not(.open) 
    //the following line, however, works 
    &:not(.disabled):hover { 
     & when (@open=false) { 
     ... 
     > .icon { 
      ... 
     } 
     } 
    } 
    } 
+1

В первой структуре есть 'div: not (.open) a ...', но вложенность меньше выглядит. Почему бы не поставить это вне 'a {}' и определить его как '&: not (.open) span {}'? – Harry

+1

Там много чего происходит, кроме того, что выше, поэтому я не могу просто выделить диапазон, если это единственный вариант. Я надеялся получить какой-то родительский селектор, если это вообще возможно. Но ты дал мне идею для работы. Спасибо. – chibis

+1

'&' является родительским селектором, но с указанным выше вложением родительский элемент будет 'div a' (' div', потому что он вызывает mixin и 'a' из-за вложенности). Поэтому '&: not (.open)' будет производить 'div a: not (.open)'. – Harry

ответ

0

Придумал следующие работы вокруг:

.mymixin2(@a, @b, @open){ 
    a { 
    color: @a; 
    & when(@open = false){ 
     span { 
     color: @b; 
     } 
    } 
    } 
} 
.mymixin1(@a,@b){ 
    &.open {.mymixin2(@a,@b,true);} 
    &:not(.open) {.mymixin2(@a,@b,false);} 
} 

div .mymixin1('red', 'green'); 

Это, кажется, сделать трюк.

+1

Это не похоже на меньший код (он даже не компилируется, а также при всех исправленных ошибках он по-прежнему выглядит прекрасным примером перестройки). –

+0

Почему это не выглядит меньше и что там перерабатывает? – chibis

+0

Это не меньше кода, потому что вы не сможете его скомпилировать. И это слишком сложно, потому что у него слишком много ненужного кода. Еще раз посмотрим на суть, с которой я связан в моем комментарии выше (он действителен Меньше, и он создает CSS, который вы обозначили как то, что вам нужно в Q). –

Смежные вопросы