vendredi 25 janvier 2019

Less - if with a variable condition

What I'm trying to do is generate a grid with less:

.grid {
    /**
     * @link http://lesscss.org/functions/#list-functions-each
     */
    @selectors: 2, 3, 4, 5;
    each(@selectors, {
        &.--cols-@{value} {
            @width: if((@value < 3), 100% / @value, 50%); // of @value = 2 ?
            .list {
                flex-basis: ~"calc(@{width} - 1px)";
            }
            .item {
                max-width: ~"calc(@{width} - 1px)";
                width:     100%;
            }
        }
    });
}

But somehow less is generating then calc(50% - 1px) for all columns. So the question is - what am I doing wrong?

P.S. You can test here: http://lesscss.org/less-preview/

Aucun commentaire:

Enregistrer un commentaire