I originally wrote this post for the toptal development blog, located here : https://www.toptal.com/css/sass-mixins-keep-your-stylesheets-dry
These are the Sass mixins that I use for just about every web project I work on. There are many interesting articles with some useful Sass mixins throughout the web. There are also a few good Sass mixin libraries that are great for smaller tasks, like Bourbon. Another great mixin library which I have derived some of the mixins below from is Andy.
The mixins I will go over in this article are working with the following:
- Media queries
- Color themes
- Centering elements
- Consistent font sizes
- Animation transitions
- Retina images
- Quick gradients
- External fonts
- Quick padding/margins
Media queries allow you to easily add custom break points to your stylesheets, and quickly add custom responsive behavior within an element for different break points. However, littering stylesheet media queries can quickly become a cause for headaches, especially when it comes to maintaining them down the road. With Sass mixins, all that can change.
It works great standalone, or with other grid frameworks like Bootstrap.
The if statement will emit a media query tuned to a particular screen size depending on the size name provided to the mixin. This will allow you to easily adjust the behavior of your CSS attributes accordingly. You can also customize the point in which you want to adjust your CSS attributes. Usually, the most responsive layouts will stick with 3 or 4 defined screen width dimensions to adjust the content to. The variance of screen sizes, devices, and applications is always expanding, but there is a popular trend many web developers will use for their layouts; small screen sizes for phones, medium for tablets, large for laptops, and extra large for desktop computers.
For reference, the media points used in Bootstrap v3 are:
- max-width: 767px (any screen up to 767px wide)
- min-width: 768px (any screen more than 768px wide)
- min-width: 992px (any screen more than 992px wide)
- min-width: 1200px (any screen more than 1200px wide)
Defining a color theme to use throughout your site helps save time on having the same colored portions of CSS on the same HTML elements. If you want all your div buttons to have a 1px solid dotted border, then you can easily add this to your theme. This Sass mixin will allow you to set as many color variables as you want, and to affect as many classes as you would like. This can be a useful tool to provide color options for something, or any time you have a feature that affects the color of many elements at once. There is a great article here with more information on working with color themes in Sass.
Depending on your layout, there are many different ways to center align an element in your styles. The below method uses absolute positioning and will allow you to define vertical, horizontal, or both centered elements. The parent element will need to have position: relative. This allows you to easily define the centered position of an element in a short 2 lines of code.
This mixin is one of the most versatile ways to center content, but it’s worth noting that there are many different ways to center your content, and this might not always be the best solution. Depending on your layout style and allowance for browser compatibility you might want to center your content in a different way. Flexbox is another popular and very useful tool for alignment, although right now it isn’t fully supported by old browsers. Simple text and container alignment can be done easily without this mixin, using simple css properties. This one will help you more when creating layouts and working with containers inside of other containers.
Apply the clearfix css property quickly and effectively to elements. There are lots of clearfix solutions around the web, and this one seems to work the best. It’s also easy to use once the Sass mixin is created.
This mixin will benefit whenever you have content floating right or left, and want to clear the space below the floated element to insert new content below.
Consistent font sizes
Set a rem font size in your document, to use for all your text elements. This is a better way to scale up and down fonts instead of em. Using em will compound based on the other CSS attributes, but rem will only scale up or down based on the size you define in your HTML document. Separating a .scss file for all your typography and using the below mixin to define your default font sizes will drastically automate your typography coding workflow.
This mixin also creates a pixel fallback for browsers that don’t support rem (IE8 and below). When the browser doesn’t support rem sizing, the mixin will calculate the pixel equivalent of the initial rem size you set and output both pixel and rem values for an element.
Quickly define animation properties and add them to your elements. Currently, the animation CSS property still needs vendor prefixes, so this will also add that to the mix.
The first part of the mixin will add the proper vendor prefixes needed for browser compatibility. The next section sets it up to input your custom strings and properties. The final section of the mixin is where you would create your mixin name (in this case: fade-out) and define what you would like to happen at each keyframe in the animation. This example setup is very basic, and you can add changes to any percentage of the animation duration.
The example here will take the targeted element at 0% of the animation (beginning), and transition the property from full opacity (opacity: 1;) to having no opacity and essentially disappearing (opacity: 0;) at 90% of the animation. So if I set the animation to have a 5 second timeline, the element will disappear after 4.5 seconds (90% of the 5 second animation). The last property I define in the usage of the mixin (the “3”) is the number of times the animation will repeat.
Add high resolution images to your site, with a fallback for devices that aren’t displaying high resolution images. When using retina images I would recommend compressing as much as possible without destroying the image. A good tool for this is TinyPNG (supports PNG and JPG).
This mixin will allow you to add a rule in the same spot as the CSS property defining the original image.
Previously, the only CSS solution to this was to use media queries, and this solution is much cleaner and easier. For more thoughts and ideas about this mixin, check out this article.
Easily add gradients defining only start color, end color, and gradient type. Add all the gradient properties and you can choose as needed. The gradient type allows you to choose from a vertical gradient, horizontal gradient, or a radial (sphere shaped) gradient.
No longer will you have to remember the various vendor prefixes and parameter orders for implementing gradients.
Using the CSS font-face property, we can easily add fonts in a directory and include all font types. When using font files, different browsers have different compatibility with file types. This mixin helps solve that by using any relevant font file in a directory.
Simply include any font files in a directory, and add the “@include” tag in your styles, which will grab all the files from your chosen folder.
This mixin will take care defining alternate font format URLs, including odd workarounds necessary for backwards compatibility.
Quick padding & margins
The main reason I use this is because I will omit a specific padding property, like padding-left at times, and I don’t want to define it. Using the Sass property null, you can omit padding properties. The same rules apply for margins.
The mixing can then be used to replace a bunch of padding-* and margin-* properties throughout your stylesheets. You can quickly include this mixin in any element and define only the sides of padding/margins you want to include. Padding and margins are one of the most used CSS styles added to elements, and a small time saver like this will quickly add up.
Using Sass mixins like the ones outlined in this article are a great way for making your workflow more efficient. Theses specific mixins will help you spend less time on common web tasks, giving you more time to focus on other aspects of the project that require more careful and skilled insight.
Installing and working with Sass can be done a number of ways, and will involve using the command prompt to install some libraries in your project. One way to install Sass is to use Ruby — as outlined on the main Sass website here — and another popular way is to use Node.js.
The benefits of Sass extend beyond automation, and can help to easily create and manage your project stylesheets. Even some of the most basic web projects can have thousands of lines of CSS code. Sass is a great way to break this code up into more manageable bits, each with their own focus.
Bourbon — a large mixin library with smaller mixin tasks
Andy — another mixin library with smaller tasks