SCSS and the power of mixins

            awesome
       
   product, Tell me about it!

So I wrote a mixin as below:

@mixin generateClassNamesWithVariables($start,$stop, $classname, $css-element, $spacer){
	@for $i from $start through $stop {
	    .#{$classname}#{$i*$spacer} { #{$css-element}: #{$i * $spacer}px; }
	}
}

This is how i have used the above mixin:

@include generateClassNamesWithVariables(1,5,margin-,margin,10);
@include generateClassNamesWithVariables(1,5,margin-top-,margin-top,10);
@include generateClassNamesWithVariables(1,5,margin-bottom-,margin-bottom,10);
@include generateClassNamesWithVariables(1,5,pad-right-,padding-right,10);
@include generateClassNamesWithVariables(1,5,pad-left-,padding-left,10);
@include generateClassNamesWithVariables(1,5,pad-top-,padding-top,5);
@include generateClassNamesWithVariables(1,5,pad-bottom-,padding-bottom,5);
@include generateClassNamesWithVariables(1,5,pad-,padding,10);
@include generateClassNamesWithVariables(10,30,f,font-size,1);

So what this mixin will do is generate the following css.

Now the html will be something like this, it is much cleaner and works like a charm!

        An  

            awesome
       product