Table of Contents
If you know and use Sass, you probably already know how powerfull and amazing this CSS preprocessor is. On the other hand, if you have no idea what am I talking about here you have to check 7 reasons to love and use Sass post to understand why Sass will be your next soulmate in web design and then jump right into it with Learn Sass in 20 minutes post. Okay, back to today’s topic. In this post you will get 6 amazing Sass mixins that will kick your work and productivity to another level. Without further ado, let’s begin!
I will asume that you are not a beginner when it comes to Sass so we will skip any introduction or explanation how mixins and similar stuff work. Still, if you are in doubt, head right to Learn Sass in 20 minutes post to bulletproof your skills and knowledge by mastering Sass.
#1 – Media queries
Today, having responsive website is not a question, but a duty. When about half of users comes from smartphones and tablets (or other mobile devices), media queries are important part of your plan. Even though I don’t like to let certain breakpoints “manage” the content (more about the breakpoint problematic here), sometimes default media queries can be very handy. Below are mixins for 30em (480px), 40em (640px) and 60em (960px).
Sass:
@mixin screen-small {
@media only screen and (max-width: 30em) {
@content;
}
}
@mixin screen-medium {
@media only screen and (max-width: 40em) {
@content;
}
}
@mixin screen-large {
@media only screen and (max-width: 60em) {
@content;
}
}
Example:
.container {
margin: auto;
width: 960px;
@include screen-small { width: 320px; };
@include screen-medium { width: 580px; };
}
CSS:
.container {
margin: auto;
width: 960px;
}
@media only screen and (max-width: 30em) {
.container { width: 320px; }
}
@media only screen and (max-width: 40em) {
.container { width: 600px; }
}
Also, you can easily modify these mixins to create one that will take care about any breakpoint you can dream about just by including an argument.
Sass:
@mixin media($value, $breakpoint) {
@media only screen and ($value: $breakpoint) {
@content;
}
}
Example:
.container {
margin: auto;
width: 720px;
@include media(max-width, 40em) { width: 320px; };
@include media(min-width, 75em) { width: 960px; };
}
CSS:
.container {
margin: auto;
width: 720px;
}
@media only screen and (max-width: 40em) {
.container { width: 320px; }
}
@media only screen and (min-width: 75em) {
.container { width: 960px; }
}
#2 – Font-size in Rems
Rem units are basically ems pushed to another level. The main distinguisher is the “r”. This letter, which stands for “root” element, means that this unit will always relate to the font-size set in HTML. However, rem units are not supported by IE 8. So, if we want to support this browser, we should also include a fallback in pixels. Seems like a lot of work. Well, let’s create a mixin to do it for us.
Sass:
@function countRem($value) {
$remValue: $value / 16px;
@return $remValue * 1rem;
}
@mixin font-size($value) {
font-size: $value;
font-size: calculateRem($value);
}
Example:
h1 { @include font-size(24px); }
CSS:
h1 {
font-size: 24px; /*fallback if rem is not supported*/
font-size: 1.5rem;
}
#3 – Transitions
It has been mentioned many times that transitions is one of the trends of 2014 and 2015. However, in some browsers they still need to be prefixed. Sure, we can do this manually, but who wants to type every prefix for every browser engine? If not nobody, it will at least be a very small group of people. Again, let’s take Sass and let it do the repetitive work.
Sass:
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
Example:
a {
color: #333;
@include transition(color .25s ease-in-out);
&:hover {color: #000;}
&:active {color: #555;}
}
CSS:
a {
color: #333;
-webkit-transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-ms-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
a:hover { color: #000; }
a:active { color: #555; }
#4 – Opacity ( with IE filter)
Opacity can be pretty useful in many situations. However, if you want to support IE 8 or even lower versions (Are you masochist?), you have two options. First, forget the opacity at all. Second, learn more about the filter CSS property and how to use it. Wait, there is a third option. Sass mixin that will take care about it. All you have to do is include the value you want.
Sass:
@mixin opacity($opacity) {
opacity: $opacity;
filter: alpha(opacity=$opacity*100);
}
Example:
@mixin opacity($opacity) {
opacity: $opacity;
filter: alpha(opacity=$opacity*100);
}
.thumbnail {
width: 48px;
height: 48px;
@include opacity(.5);
}
CSS:
.thumbnail {
width: 48px;
height: 48px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#5 – Retina images
Since devices with retina displays came to play, we have to consider what images to serve to the visitors of our website. If we use images in small resolution, they will probably look blurry when someone views them on retina display. On the other hand, using high resolution images all the time will increase the bandwith and loading time on slower connections. To deal with this issue we can use smart mixin that will watch for pixel-ratio and min-resolution of the screen and provide appropriet assets.
Sass:
@mixin background-image-retina($file, $type, $width, $height) {
background-image: url($file + '.' + $type);
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
& {
background-image: url($file + '@2x.' + $type);
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
-o-background-size: $width $height;
background-size: $width $height;
}
}
}
Example:
img {
width: 760px;
height: 400px;
@include background-image-retina(monkey, png, 760px, 400px);
}
CSS:
img {
width: 760px;
height: 400px;
background-image: url(monkey.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
img {
background-image: url(monkey@2x.png);
-webkit-background-size: 760px 400px;
-moz-background-size: 760px 400px;
-o-background-size: 760px 400px;
background-size: 760px 400px;
}
}
#6 – Clearfix
The last mixin for today will be clearfix. This small hack is one of the ways for an element to automatically clear its child elements. It can be useful for you if you are isung float layouts – float property is applied on elements to stack them horizontally.
Sass:
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
}
Example:
[class$="col-"] {@include clearfix;}
CSS:
[class$="col-"]:before,
[class$="col-"]:after {
content: "";
display: table;
}
[class$="col-"]:after { clear: both; }
Summary
Mixins can make any CSS-related part your work easier and faster than ever before. I hope that these few mixins we explored today will find their place in your toolbox. If you have any other great mixins to share, please leave a comment.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
