Support json (to pass in arrays)

[thecotne]

so i have project https://github.com/thecotne/square-file-icons
i want change from lodash template to less
since it makes more sens for me to generate css with less

but i can't pass json to less.js
i can pass strings
but not objects and arrays of objects

i will be nice to support something like this

@foreach(@glyphs as @glyph) {
    .@{glyph.name} {
        content: "\\@{glyph.char}";
    }
}

glyphs is array of objects passed from modifyVars

[seven-phases-max]

You actually can pass an array of values via modifyVars, e.g: @glyphs: a, b, c, d, e, etc;
I.e. "Arrays" in Less are just plain CSS comma and whitespace separated value lists. For more details and tips see:

• http://stackoverflow.com/questions/23658087
• http://stackoverflow.com/questions/21010520
• http://stackoverflow.com/search?tab=relevance&q=%5bless%5d%20array
• http://stackoverflow.com/search?tab=votes&q=%5bless%5d%20loop
• less-plugin-lists
• etc.

E.g. just convert your JSON to a more Less-friendly structure ("direct" JS-like-object-as-array support would be strange since there's no corresponding language entities in either Less or CSS).

[thecotne]

this extract(extract(@array, ),2) looks very weird (from one of links)
why not @array[@iterator][2] ?

what about objects?

i want something like this to work with less code above

less({
    modifyVars: {
        glyphs: [
            {
                name: 'first glyph',
                char: '1'
            }, {
                name: 'second glyph',
                char: '2'
            }, {
                name: 'x glyph',
                char: 'x'
            }
        ]
    }
})

also simple things like foreach must be simple not complex like this

.example_module {
    .-(@i: length(@colors)) when (@i > 0) {
        @name: extract(@colors, @i);
        &.@{name} {background: @@name}
        .-((@i - 1));
    } .-;
}

[seven-phases-max]

why not @array[@iterator][2] ?

Because Less is a CSS extension, not a JavaScript or PHP extension... (and CSS [] is a radically different thing).
If you're looking for a PHP-like CSS scripting consider Sass or Stylus.

Technically, for an icon list you don't even need any array and a loop at all (as it can be generated via "list of mixins"), e.g.:

.glyphs() {
    // "array" of icons
    .-(foo, "a");
    .-(bar, "b");
    .-(baz, "c");
    .-(qux, "d");
}

// generate icons classes:

& {
    .glyphs();
    .-(@name, @icon) {
        .@{name} {
            content: @icon
        }
    }
}

what about objects?

See less-plugin-lists:at.
Beyond that, what kind of objects do you expect in contexts of CSS? :) Yet, again if you're looking for a scripting language, Less is not something to start with...

also simple things like foreach must be simple not complex like this

You can write your own mixin (5 lines of code) to hide whatever key/value extraction under either syntactic sugar (see http://stackoverflow.com/a/21441220, #2270 etc.).

[thecotne]

if you ask me this

@foreach(@glyphs as @glyph) {
    .@{glyph.name} {
        content: "\\@{glyph.char}";
    }
}

looks more css-like then this

.glyphs() {
    // "array" of icons
    .-(foo, "a");
    .-(bar, "b");
    .-(baz, "c");
    .-(qux, "d");
}

// generate icons classes:

& {
    .glyphs();
    .-(@name, @icon) {
        .@{name} {
            content: @icon;
        }
    }
}

also i don't understand what is magic behind .-

[seven-phases-max]

if you ask me this ... looks more css-like then this

You compare different things (i.e. just code vs.data + code). Either way the first does not exist while the second is there and works just fine.

.-

It's just a mixin name (replace with any you like more, e.g. createGlyphObject).

[thecotne]

If you're looking for a PHP-like CSS scripting consider Sass or Stylus.

okey