Less loop with hash is it possible?

Question

Before start shooting me, I have to say that I am totally new on less, so please don't shoot !! :)

What I'd like to do is to write some classes for aligning my text based on my screen size, and instead of writing my code by hand I'd like to use a loop of less (if it is possible of course) to generate my classes.

So what I'd like to do is something like this:

.text-sm-left {
    text-align : left;
}

.text-sm-right {
    text-align : right;
}

.text-sm-center {
    text-align : center;
}

.text-sm-justify {
    text-align : justify;
}

But as I already have said, I don't like to do it by using hand written code.

So is there a way in less to use a kind of array or hash and loop over it in order to produce the required code?

The array or the hash should contain only the stings left, right, center, justify

Another option, if that's possible is to loop over my screen sizes as well, like sm, md, lg.

Thanks a lot.

dunno about LESS, but there certainly are loops in SASS. I'd be surprised if it wasn't in LESS also. — MightyPork, Feb 06 '15 at 14:31
I think in the past I already had used this feature in `SASS`, and I don't see any relative example in `LESS`, that's why I am asking for that. — KodeFor.Me, Feb 06 '15 at 14:33

KodeFor.Me · Answer 1 · 2015-02-06T15:04:30.687

Finally I found the solution and it's the following:

@align: left, right, center, justify;

/* Small devices (tablets, 768px and up) */
@media (min-width : @screen-sm-min)
{
    .createMediaQueries(@iterator:1) when (@iterator <= length(@align))
    {
        @direction: extract(extract(@align, @iterator), 1);

        .text-sm-@{direction}
        {
            text-align : @direction !important;
        }

        .createMediaQueries((@iterator + 1));
    }
    .createMediaQueries();
}

/* Medium devices (desktops, 992px and up) */
@media (min-width : @screen-md-min)
{
    .createMediaQueries(@iterator:1) when (@iterator <= length(@align))
    {
        @direction: extract(extract(@align, @iterator), 1);

        .text-md-@{direction}
        {
            text-align : @direction !important;
        }

        .createMediaQueries((@iterator + 1));
    }
    .createMediaQueries();
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : @screen-lg-min)
{
    .createMediaQueries(@iterator:1) when (@iterator <= length(@align))
    {
        @direction: extract(extract(@align, @iterator), 1);

        .text-lg-@{direction}
        {
            text-align : @direction !important;
        }

        .createMediaQueries((@iterator + 1));
    }
    .createMediaQueries();
}

Thanks a lot for your interest.

UPDATE

The following is even better solution for my problem:

@align: left, right, center, justify;
@screen : @screen-sm-min, @screen-md-min, @screen-lg-min;
@sizes  : sm, md, lg;

.createMediaQueryRules(@mediaIterator:1) when (@mediaIterator <= length(@screen))
{
    @mediaQuery : extract(extract(@screen, @mediaIterator), 1);
    @size : extract(extract(@sizes, @mediaIterator), 1);

    @media (min-width : @mediaQuery)
    {
        .createTextAlignRules(@iterator:1) when (@iterator <= length(@align))
        {
            @direction: extract(extract(@align, @iterator), 1);

            .text-@{size}-@{direction}
            {
                text-align : @direction !important;
            }

            .createTextAlignRules((@iterator + 1));
        }
        .createTextAlignRules();
    }

    .createMediaQueryRules((@mediaIterator + 1));
}
.createMediaQueryRules();

Yes, the second solution is better but you probably don't need the outer extract function in `extract(extract(@screen, @mediaIterator), 1);` because as I understand the `@screen-[xx]-min` variable has only one value (judging by your use of 1). You could also use a list for the screen sizes. — Harry, Feb 21 '15 at 13:18

Less loop with hash is it possible?

1 Answers1