Creating utility classes with Sass
Sass’ @each-loop can create many similar CSS-classes without having to type them out. We can use that to create our own utility-first classes like they use in Tailwind CSS. By looping over a dictionary, we can create blocks like text-xs, text-sm, text-md, and so on in one go.
$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/$font-sizes: (
"xs": 1.2rem,
"s": 1.6rem,
"m": 2.0rem,
"l": 3.2rem,
"xl": 4.8rem
);
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}
/*
.font-size-xs { font-size: 1.2rem; }
.font-size-s { font-size: 1.6rem; }
.font-size-m { font-size: 2.0rem; }
.font-size-l { font-size: 3.2rem; }
.font-size-xl { font-size: 4.8rem; }
*/