Question

I want to create a function in SASS that generates different classes.
Something like this

@function test($class-name) {
    @for $i from 1 through $tot-class {
        .#{$class-name}-#{$i} {
            //some rules
        }
    }
}

but i can’t figure how to call this function.
I’ve tried with

 @test(red);

or

 test(red);

but it doesn’t seem to work.
Which is the right way?

Answer 1

The main problem here is that you don’t actually want to use a function, you want a mixin. The difference is that functions don’t contain any CSS rules – they simply return a value (which you can assign to a variable or use in a CSS property declaration). Mixins, on the other hand, have no return value and can contain full-blown CSS rules to be added when that mixin is included into the SASS document. Here’s what your example would look like as a mixin:

@mixin test($class-name) {
    @for $i from 1 through $tot-class {
        .#{$class-name}-#{$i} {
            //some rules
        }
    }
}

You’d then include the mixin later by using:

@include test(red);