如何使用 LESS 中的 Guards 迭代键值对列表

问题描述

我正在使用 LESS 1.6.0 版（不是自愿的）。我通读了LESS documentation on 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 类应该只有一个声明。我做错了什么？

解决方法

这需要进一步挖掘。但现在我可以看到，从 LESS 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);