Arrays with Less | 易学教程

问题

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;

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

回答1:

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;

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.

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.

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);
    }
}

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
and so on...

回答2:

// DEFINE COLORS AS VARIABLES TO BETTER HANDLE
@blue: #7FB3D4;
@gray: #767676;
@green #8CC079;
@red #b35d5d;
@dark-red: #b5473e;
@black: #666;
@cyan: #81BABD;
@purple: #AEA7CF;

// CREATE ARRAY
@badge-colors: '@{blue}','@{gray}','@{green}','@{red}','@{dark-red}','@{black}','@{cyan}','@{purple}';
// SAVE YOUR ARRAY LENGTH
@howmany: length(@|badge-colors);

// LOOP THROUGH THEM, SEE: https://gist.github.com/juanbrujo
.loop (@index) when (@index > 0){
    // CLEAN EACH COLOR NAME
    @color: e(extract(@badge-colors, @index));
    // USE EACH COLOR
    element{
      color: @color;
    }
    .loop (@index - 1);
}
.loop(0){}
// KEEP LOOPING
.loop(@howmany);
// END

回答3:

// DEFINE COLORS AS VARIABLES
@blue: #0000FF;
@green: #00FF00;
@red: #FF0000;
@yellow: #FFFF00;

// CREATE ARRAYS
@badge-color-names: 'blue', 'green', 'red', 'yellow';
@badge-colors: '@{blue}', '@{green}', '@{red}', '@{yellow}';

// MIXIN
.make-badge-colors(@badge-color-names, @badge-colors) {
  .badge-color(@index) when (@index =< length(@badge-colors)) {
    @name:  extract(@badge-color-names, @index);
    @value: extract(@badge-colors, @index);
    @item: ~".badge-@{name}";
    @{item} {
      color: color(@value) !important;
    }
    .badge-color(@index + 1);
  }
  .badge-color(1);
}

// CREATE
.make-badge-colors(@badge-color-names, @badge-colors);




// COMPILED OUTPUT
.badge-blue {
  color: #0000FF !important;
}
.badge-green {
  color: #00FF00 !important;
}
.badge-red {
  color: #FF0000 !important;
}
.badge-yellow {
  color: #FFFF00 !important;
}

来源：https://stackoverflow.com/questions/20954762/arrays-with-less

标签

less