CODEWITHSUNDEEP
sass
Designer023
Designer023

Reputation: 2002

How do I combine a range of sass classes that are created in a loop

I am using SASS to construct a range of classes from variables passed into a mixin.

@mixin classes($key, $num) {
    @for $i from 1 through $num {
         [class*=#{$key}-#{$i}] { 
                @content
         }
    }
}

@include classes(grid, 8) {
    width:100px;
}

It currently makes the classes like I want, but all as 8 separate classes (which are identical in @contents. Is there a way to merge them all together so I get:

[class*=grid-1],
[class*=grid-2],
....
[class*=grid-8],
{
 width:100px;
}

I'm not sure if it's even possible to do this? Any pointers would be greatly appreciated.

Thanks,

Carl

Upvotes: 3

Views: 967

Answers (1)

Designer023
Designer023

Reputation: 2002

I found the answer eventually

$classes: ();
@for $i from 1 through $cols {
    $classes: join($classes, unquote("#{$prefix}#{$i} "), comma);
}


#{$classes} {
    float: left;
    margin-right: $gutterPercent;
    width: $columnWidth;
}

Upvotes: 5

Related Questions