#for loop in a mixin in precss or sass - css

Question

I have this great for loop in my precss style sheet. I would like to convert it to a mixin where i can pass the start values for $size (font-size) and $spacing(letter-spacing) for different media queries. I cannot get the variables to increment as i progress through the loop when i call it from a mixin. It works fine from the stylesheet
/*--adds .4 rem to each heading fz and character spacing 1-6---*/
$size: 1.8rem;
$spacing: 7px;
#for $i from 6 through 1 {
h$i {
font-size: resolve($size);
letter-spacing: resolve($spacing);
#extend %heading;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}

Answer 1

Your current code is close to working as a mixin when wrapped in a #mixin declaration in SCSS. The only tweak needed is outputting the $i in the selector using the #{$variable}
SCSS input:
%heading{
/* heading properties */
color: #999;
font-family: sans-serif;
}
#mixin headingSize($size: 1.8rem, $spacing: 7px){
#for $i from 6 through 1{
h#{$i}{
#extend %heading;
font-size: $size;
letter-spacing: $spacing;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}
}
#include headingSize($size: 2rem, $spacing: 10px);
This example uses your original $size and $spacing variables as default parameters in the mixin.
Here's an example JSFiddle in action.
CSS output:
h6, h5, h4, h3, h2, h1 {
/* heading properties */
color: #999;
font-family: sans-serif;
}
h6 {
font-size: 2rem;
letter-spacing: 10px;
}
h5 {
font-size: 2.4rem;
letter-spacing: 12px;
}
h4 {
font-size: 2.8rem;
letter-spacing: 14.4px;
}
h3 {
font-size: 3.2rem;
letter-spacing: 17.28px;
}
h2 {
font-size: 3.6rem;
letter-spacing: 20.736px;
}
h1 {
font-size: 4rem;
letter-spacing: 24.8832px;
}