Helpful Sass Mixins
Do you use Sass? Do you like to save time when performing boring, repetitive tasks? [drumroll] Then this is the article for you!
First, I need to make the point that this is a living document. As I find or write more useful Sass shortcuts (or find deadly errors in what I have written), I will add/correct them here. With that out of the way, commence the reading.
Custom Fonts - Based off of Typekit selection
I use this bit to define any custom fonts (Typekit fonts in this case), so I don’t have to remember all the different weights that come within a font. For example, here’s a bit of code to reuse the Facit typeface:
|1 2 3|| |
The string “facitweb” is based on Typekit’s own naming convention. Make sure you use the right name.
Use this one at your own risk. This is based on the “rem”, or root em, size unit. If you must use the traditional non-mixin “em” instead of the “rem” (i.e. have to support non-modern browsers), then stick with what you know. This is more of an experiment anyhow.
|1 2 3 4|| |
This is a simple border radius mixin, but it is so much more convenient than typing vendor prefixes over and over and over and over and over and over and over…
|1 2 3 4 5 6 7 8 9 10|| |
All the opacities!
|1 2 3 4 5 6|| |
Just a simple box shadow. Again, let’s not worry about those vendor prefixes.
|1 2 3 4 5|| |
There you go! I shall be on the hunt for more Sass shortcuts and add them here as soon as I give them the official thumbs-up.