Created
May 16, 2020 16:50
-
-
Save eric-mathison/fc2d1434a89a245b18804539a7a78b44 to your computer and use it in GitHub Desktop.
SASS helper for adding classes to adjust text size
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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