Блог

Я работаю с МЕНЬШЕЙ версией 1.6.0 (не по своему выбору). Я прочитал МЕНЬШЕ документации о Mixin Guards. Я создал функцию LESS для циклического просмотра списка цветов с ключевыми значениями для создания классов CSS. В рамках этой функции я хочу установить условие для изменения свойств моих стилей, если мои префиксы разные. (т. Е. txt и bg должны иметь одинаковое объявление CSS, в то время как border имеет другое). Я считаю, что мой приведенный ниже код «делает» это, но он также усложняет мои CSS-свойства для каждого класса. Вот что я пробовал…

 
    /*MY COLORS*/
    
    @black-n25: #bfbfbf;
    @black-n75: #4d4d4d;
    @black: #000;
    @white: #fff;
    
    /*MY LIST (KEY VALUE PAIRS)*/
    
    @colors: ~'black-n25' @black-n25, ~'black-n75' @black-n75, ~'black' @black, ~'white' @white;
    
    /*MY FUNCTION TO CYCLE THROUGH MY LIST AND GENERATE CLASSES*/
    
    .generate-classes(@list, @prefix, @mprop) {
        .iter(length(@list));
    
        .iter(@i) when (@i > 0) {
            .iter(@i - 1);
            @pair: extract(@list, @i); /*@colors -> @list -> @pair*/
            @key: extract(@pair, 1);  /*the key from @colors above*/
            @value: extract(@pair, 2); /*the value from @colors above*/
    
            /*this is where things go wrong...*/

            .mixin(@prefix) when (@prefix = txt), (@prefix = bg) {
                @{mprop}: @value;
            }
    
            .mixin(@prefix) when (@prefix = border) {
                @{mprop}: solid 2rem @value;  
            }
    
            .@{prefix}-@{key} {
                .mixin(@prefix);
            }
        }
    }
    
    /*CALL FUNCTION FOR EACH CASE | PARAMETERS ARE...THE LIST, PREFIX (CSS SELECTOR NAME), AND CSS PROPERTY VALUE*/
    
    .generate-classes(@colors,txt,color);
    .generate-classes(@colors,bg,background-color);
    .generate-classes(@colors,border,border);

 

…и визуальное представление того, что генерируется в браузере…

Как вы можете видеть, он дополняет объявления для каждого класса, кроме первого класса. Каждый CSS-класс должен иметь только одно объявление. Что я делаю не так?

Это потребовало дальнейшего изучения. но теперь я вижу, что начиная с версии 1.5.0, CSS Guards может помочь при переборе элементов списка парных значений ключей в LESS. Я удалил использование Mixin Guards из своей исходной логики и вместо этого установил следующую настройку, которая теперь работает.

Теперь это дает мне возможность добавлять гораздо больше цветов и пользовательских объявлений CSS для пользовательских префиксов, и все это в рамках одной функции.

  /*MY COLORS*/
    
    @black-n25: #bfbfbf;
    @black-n75: #4d4d4d;
    @black: #000;
    @white: #fff;
    
    /*MY LIST (KEY VALUE PAIRS)*/
    
    @colors: ~'black-n25' @black-n25, ~'black-n75' @black-n75, ~'black' @black, ~'white' @white;
    
    /*MY FUNCTION TO CYCLE THROUGH MY LIST AND GENERATE CLASSES*/
    
    .generate-classes(@list, @prefix, @mprop) {
        .iter(length(@list));
    
        .iter(@i) when (@i > 0) {
            .iter(@i - 1);
            @pair: extract(@list, @i); /*@colors -> @list -> @pair*/
            @key: extract(@pair, 1);  /*the key from @colors above*/
            @value: extract(@pair, 2); /*the value from @colors above*/
    
            /*this now works and sets a single declaration for each class...*/
            
            .@{prefix}-@{key} when (@prefix = txt), (@prefix = bg) {
              @{mprop}: @value;
            }

            .@{prefix}-@{key} when (@prefix = border) {
              @{mprop}: solid 2rem @value;
            }
        }
    }
    
    /*CALL FUNCTION FOR EACH CASE | PARAMETERS ARE...THE LIST, PREFIX (CSS SELECTOR NAME), AND CSS PROPERTY VALUE*/
    
    .generate-classes(@colors,txt,color);
    .generate-classes(@colors,bg,background-color);
    .generate-classes(@colors,border,border);