Как получить внутреннюю переменную внутри mixin меньше?

Question

Я пытался получить переменные внутри mixin, и это не будет работать при использовании охранников. Я демонстративно пропустил что-то в правиле. Я новый ученик меньше и его функциональность. Кто-нибудь, пожалуйста, дайте мне знать мою ошибку? Пожалуйста, обратитесь к приведенному ниже фрагменту кода.

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient; // here I need the output
}

.custom-colors(@value, @light, @dark, @lightdark){   
    & when (@lightdark = true){
        @gradient: lighten(extract(@value, 1), @light), darken(extract(@value, 2), @dark);
    }    
    & when (@lightdark = false){
        @gradient:  darken(extract(@value, 1), @dark), lighten(extract(@value, 2), @light);
    }   
}

Я получил эту ошибку при выполнении кода выше

Если я уберу условие охраны, я смогу получить переменную внутри меньшего количества mixin, как показано ниже.

div {
  color: #000000, #cccccc;
}

Заранее спасибо.

Answer 1

Ваша ошибка заключается в предположении, что & when строительство вроде ifчто-то вроде C-подобных языков. Но это не так, & {} это простой набор правил CSS (так же, как div {} например) с & как селектор и как простой набор правил, он не предоставляет никаких внутренних переменных внешним областям.

Только миксины открывают свои внутренние объекты во внешнюю область при вызове, поэтому один из методов для достижения того, что вам нужно:

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient;
}

.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = true) {
    @gradient: lighten(extract(@value, 1), @light), 
                darken(extract(@value, 2), @dark);
}    
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = false) {
    @gradient:  darken(extract(@value, 1), @dark), 
               lighten(extract(@value, 2), @light);
}

Это может быть дополнительно упрощено до:

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient;
}

.custom-colors(@value, @light, @dark, true) {
    @gradient: lighten(extract(@value, 1), @light),         
                darken(extract(@value, 2), @dark);
}    
.custom-colors(@value, @light, @dark, false) {
    @gradient:  darken(extract(@value, 1), @dark),  
               lighten(extract(@value, 2), @light);  
}

Также обратите внимание, что darken(somecolor, somevalue) равно lighten(somecolor, -somevalue) и наоборот, так что все это может быть дополнительно оптимизировано в зависимости от фактического фрагмента.