Skip to content

Instantly share code, notes, and snippets.

@eric-mathison
Created May 16, 2020 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eric-mathison/fc2d1434a89a245b18804539a7a78b44 to your computer and use it in GitHub Desktop.
Save eric-mathison/fc2d1434a89a245b18804539a7a78b44 to your computer and use it in GitHub Desktop.
SASS helper for adding classes to adjust text size
// Base Font size (in rem)
$baseFontSize: 1;
// Multipliers for available font sizes
// Add additional multipliers for more font size choices
$multipliers: (1: 0.25, 2: 0.5, 3: 0.75, 4: 1, 5: 1.5, 6: 2, 7: 2.5, 8: 3, 9: 3.5, 10: 4);
@each $index, $multiplier in $multipliers {
.text-#{$index} {
font-size: #{$multiplier}rem !important;
}
}
// Autogenerated CSS from above script
.text-1 {
font-size: 0.25rem !important;
}
.text-2 {
font-size: 0.5rem !important;
}
.text-3 {
font-size: 0.75rem !important;
}
.text-4 {
font-size: 1rem !important;
}
.text-5 {
font-size: 1.5rem !important;
}
.text-6 {
font-size: 2rem !important;
}
.text-7 {
font-size: 2.5rem !important;
}
.text-8 {
font-size: 3rem !important;
}
.text-9 {
font-size: 3.5rem !important;
}
.text-10 {
font-size: 4rem !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment