更少的数组 [英] Arrays with Less

问题描述

使用SASS，您可以创建如下这样的变量数组:

With SASS you can create an array of variables like this:

$badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d, dark-red #b5473e, black #666, cyan #81BABD, purple #AEA7CF;

是否也可以使用Less创建数组?

Is there some way of creating arrays with Less as well?

推荐答案

问题的答案是是的，您可以在Less中创建和使用数组".数组(在CSS中，因此称为Less领域，通常称为列表")使用与Q中相同的代码定义:

The answer to the question is "Yes, you can create and work with arrays in Less". An array (in CSS and thus Less realm it's usually referred to as "List") is defined with just the same code as in your Q:

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

• 请参见列表函数" ，以获取可帮助您迭代此类列表/的函数/数组并访问其项目.
• 另请参阅此答案，以了解Less列表的某些高级/不太明显的属性.
• 另外请参见列表插件" 以获取典型的列表/数组/地图操作功能和特性.
• See "List Functions" for functions to help you to iterate through such lists/arrays and access their items.
• Also see this answer for certain advanced/not-so-obvious properties of Less lists.
• Additionally see the "Lists Plugin" for typical list/array/map manipulation functions and features.

使用Less数组的典型入门示例是通过简单的颜色列表进行迭代的摘录(通过 loop )创建相应的CSS类:

A typical introductory example of working with Less arrays would be a snippet to iterate through simple color list (via loop) to create corresponding CSS classes:

@colors: blue, green, yellow, red;

// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@colors, @i); 
    .@{color} {
        color: @color;  
    }
}

.make-color-classes(); // run the mixin

---

第二个示例是第一个示例的更实用的版本.从二维"列表(在本例中为键/值数组的简单等效项，即地图")创建类似于问题数组的自定义颜色"类.

---

The second example is a more practical version of the first one. Creating "custom color" classes from a "two-dimensional" list (in this case being a simple equivalent of a key/value array, i.e. "map") similar to the array of the question.

使用现代更少" (通过less-plugin-lists

Using "Modern Less" (via less-plugin-lists .for-each statement):

@badge-colors: 
    blue  #44BBFF,
    gray  #F0F1F5,
    green #66CC99,
    red   #FC575E;

.for-each(@pair in @badge-colors) {
    @key: at(@pair, 1);
    .badge-@{key} {
        color: at(@pair, 2);
    }
}

---

减少旧版" 中的相同示例(使用递归mixins):

---

Same example in "Legacy Less" (using recursive mixins):

// usage:

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

.make-classes(badge, @badge-colors);

// impl.:

.make-classes(@prefix, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i); 
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2); 
        .@{prefix}-@{key} {
            color: @value;  
        }
    }
}

---

最后，对于更特定的数组/列表用法示例，请毫不犹豫地从此处的基本查询开始:

---

And finally, for more specific array/list usage examples do not hesitate to start with basic queries here at SO:

• [less] array
• [less] list loop
• 依此类推...

这篇关于更少的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！