Des tableaux avec Moins

Avec SASS vous pouvez créer un tableau de variables comme ceci:

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

Est-il un moyen de créer des tableaux avec Moins?

Il suffit de changer $ à @ et vous obtenez votre moins tableau. Voir aussi correspondant de moins en MOINS fonctions
Parfait, le seul problème est que Visual Studio détecte le "bleu" clé en tant que couleur et c'est ainsi que les peintures un peu de place à côté d'elle - est-il une bonne façon de contourner cela?

OriginalL'auteur William | 2014-01-06

  1. 18

    La réponse à la question est "Oui, vous pouvez créer et travailler avec des tableaux en Moins". Un tableau (dans le CSS et donc Moins de ce royaume, il est généralement considéré comme "Liste") est défini avec juste le même code que dans votre Q:

    @badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;
    • Voir "Liste Des Fonctions" pour les fonctions pour vous aider à parcourir ces listes/tableaux et l'accès à leurs articles.
    • Voir aussi cette réponse pour certains avancé/n'est pas si évidente propriétés de Moins de listes.
    • En plus de voir la Des Listes "Plugin" pour le type de liste/tableau/carte de manipulation de fonctions et de fonctionnalités.

    Un typique exemple dans l'introduction de travailler avec Moins de tableaux serait un extrait de parcourir de couleur simple liste (via boucle) pour créer correspondant classes CSS:

    @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

    Démo

    Le deuxième exemple est plus pratique que la version de la première. La création de "couleurs personnalisées" classes à partir d'un "deux dimensions" de la liste (dans ce cas être un simple équivalent d'une clé/valeur de tableau, c'est à dire "carte") semblable à la matrice de la question.

    À l'aide de "Moderne Moins" (via less-plugin-lists .pour chaque déclaration): 

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

    Même exemple dans "l'Héritage de moins en Moins" (à l'aide de récursive mixin): 

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

    Démo

    Et enfin, pour les plus spécifiques de tableau/liste des exemples d'utilisation, n'hésitez pas à commencer avec des requêtes de base ici, DONC:

    (Cette réponse est créé que pour servir le but de pousser plutôt overbloated et terrible exemples (pour une simple et minimaliste Q) de la réponse à la question précédente).
    Bon travail sur cette réponse. Merci!
    Pourriez-vous s'il vous plaît commenter ou expliquer comment .iter travaille ici? Il ressemble à .iter(length(@list)) définit une fonction à contenir l'itération actuelle de la valeur. Mais je suis un peu confus au sujet de la syntaxe à l'aide de moins en moins.
    appelle le mixin avec l'indice de départ en paramètre (et le mixin fondamentalement effectue une itération à partir de n (nombre d'éléments dans la liste) à 0). Pour plus de détails, voir la Moins de documentation (et Boucles en particulier).
    Le mixin est défini ci-dessous à droite le .iter(length(@list)); ligne. .iter(@i) {...} - c'est la seule (voir mon précédent. le commentaire).

    OriginalL'auteur seven-phases-max

  2. 3
    //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
    Trop de code inutile.
    il est auto-explicatif, le code est commenté whathever le développeur veut l'utiliser.

    OriginalL'auteur Jorge Epuñan

  3. -2
    //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;
}

    OriginalL'auteur Mohammad Dayeh