5 Most Popular Sass Mixins

Sass Mixins

Sass is a popular CSS pre-processor. It allows flexible way to write CSS, which infect reduce lot of iterative coding efforts. The reason developer recommend Sass is its useful features.

In my opinion:

This article would drive you through the most popular @mixin snippets, which you could use directly in your projects.

If you are new to Sass, you should read this:
- How to Configure SASS for HTML Projects

1. Responsive Breakpoints

Breakpoints perform crucial role in responsive we design. It can be defined in terms of any width size. But we should stick to the standard sizes. For example, Bootstrap has following breakpoints:

Bootstrap Breakpoints
Bootstrap Break points

So if we talk about @media queries without Sass, we have to define various break points in CSS and separate the code in and out.

Sample code for a simple @media query break point:

body{ font-size: 16px; }
...
@media screen and (min-width: 480px) {
    body {
        body{ font-size: 14px; }
        ...
    }
}

Now let's see how we can leverage CSS with Sass:

@mixin breakpoint($media){
    @if $media == xs {
        @media only screen and (max-width: 480) { @content; }
    }
    @else if $media == sm {
        @media only screen and (max-width: 768) { @content; }
    }
    @else if $media == md {
        @media only screen and (max-width: 960) { @content; }
    }
    @else if $media == lg {
        @media only screen and (max-width: 1170) { @content; }
    }
}

// usage
body{
    font-size: 16px;
    @include breakpoint(md){ font-size: 14px; }
    @include breakpoint(xs){ font-size: 11px; }
}

CSS output for above code:

body {
    font-size: 16px;
}
@media only screen and (max-width: 960) {
    body {
        font-size: 14px;
    }
}
@media only screen and (max-width: 480) {
    body {
        font-size: 11px;
    }
}
Related snippet:
Popular related article:

2. Clearfix

CSS Clearfix
CSS Clearfix

Clearfix used to clear the floating elements. In some cases it gives visibility to particular element. Below is a Sass snippet for clearfix class:

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

ul {
    @include clearfix();
}

CSS output for clearfix class:

ul:before, ul:after {
    content: "";
    display: table;
}
ul:after {
    clear: both;
}

3. CSS Animation with @keyframes

CSS3 Keyframes
CSS3 Keyframes (image credit: kirupa.com)

CSS @kyeframes is nice way to create animation without using a JavaScript or jQuery. But to do so we have to code with all vendor-prefixes, which is repetitive task:

-webkit-animation: animation-type 3s infinite;
   -moz-animation: animation-type 3s infinite;
     -o-animation: animation-type 3s infinite;
        animation: animation-type 3s infinite;

Sass @mixin can help positively here. But we need to identify some elements in @keyframes so that we could define mixin in correct way.

Let's see the CSS syntax for @keyframes:
(example credit - CSS-Tricks)

@keyframes fontbulger {
    0%,
    100% {
        font-size: 12px;
    }
    50% {
        font-size: 20px;
    }
}

@mixin keyframes

@mixin keyframes($animation-type){
    @-webkit-keyframes #{$animation-type} { @content; }
       @-moz-keyframes #{$animation-type} { @content; }
         @-o-keyframes #{$animation-type} { @content; }
            @keyframes #{$animation-type} { @content; }
}

Above we have defined @mixin keyframes that understands the $animation-type argument and extract them to with all vendor-prefixes. Next, we need to tell what will be the animation properties for particular $animation-type.

@mixin animation

@mixin animation($properties){
    -webkit-animation: #{$properties};
       -moz-animation: #{$properties};
         -o-animation: #{$properties};
            animation: #{$properties};
}

Now we need to @include keyframes without any parent element:

@include keyframes(fontbulger) {
     0%,  100% { font-size: 12px;  }
     50% { font-size: 20px; }
}

Now the last step, to call the animation into specific element and merge with keyframes(fontbugler):

.element {
     @include animation('fontbulger 3s infinite');
}

4. Headings

In any site or application, the heading is an important element, which draws direct attention of the end-user about the overall page/content. It must define well in terms of CSS. If your application is large then you must have different and standardize styling for better recognition.

Even though, you might have to face situation when client demand specific heading styles which is not matching up with your standard. Now what? Here Sass could help in much more better and flexible way.

CSS definition for Heading Elements:

h1{ font-size: 30px; color: #000; }

We could think up heading with 3 majorly used properties as arguments to be considered for @mixin.

  • font-size
  • color
  • font-weight

Let's define a Sass @mixin for Headings now:

@mixin heading($fsize, $fcolor, $ftype){
    font-size: $fsize;
    color: $fcolor;
    font-weight: $ftype;
}

// usage
h1{ @include heading(30px, #000, bold); }
h2{ @include heading(24px, #444, bold); }
h3{ @include heading(18px, #666, normal); }

CSS Output for @mixin heading:

h1 { font-size: 30px; color: #000; font-weight: bold; }
h2 { font-size: 24px; color: #444; font-weight: bold; }
h3 { font-size: 18px; color: #666; font-weight: normal; }

5. Rounded Borders

Rounded Borders
Rounded Borders

There are some CSS selectors accept multiple values as a shorthand definition. For example - padding, margin, box-shadow, border-radius, etc. Also we need to take care of vendor-prefixes.

Below is how we define border-radius with shorthand values:

            /*  T    R   B  L */
border-radius: 10px 4px 7px 0;

Now if we have border-radius same for all the corners then we would have defined border-radius: 10px; simply. But this is not the case here.

Let's define @mixin border-radius:

@mixin border-radius($val...){
    -webkit-border-radius: $val;
    -moz-border-radius: $val;
    -o-border-radius: $val;
    border-radius: $val;
}

// usage
.element{
    @include border-radius(10px 4px 7px 0);
}

You must have noticed the argument $val.... The three dots helps developers that here you could pass multiple values. The same also known as variable arguments.

CSS output for @mixin border-radius:

.element {
    -webkit-border-radius: 10px 4px 7px 0;
       -moz-border-radius: 10px 4px 7px 0;
         -o-border-radius: 10px 4px 7px 0;
            border-radius: 10px 4px 7px 0;
}

It's easy to create @mixin for other css3 properties too.
- Sass Demo

Wrapping Up

There are many ideas to consider for Sass mixins and enhance the work flow with CSS. Also, it depends on projects requirement whether we need specific things or not. Here I tried to show most popular 5 Sass mixins but if you could share more for the community, I would be more than happy.


Also published on Medium.