Sass Mixins
Tags: sass, css, scss, examples
Published: 2018-03-20 14:17:56

---
title: Sass Mixins
published: true
description: Explanation of the feature mixin of the Sass pre-processor. Added examples of the most popular mixins you must use. 
tags: Sass, CSS, SCSS, Examples.
---

This is the third post about specific Sass features and this one is about mixins. Previous I wrote about [import feature](https://kolosek.com/sass-import) and [extend feature](https://kolosek.com/css-extend/) and there was the one about [nesting](https://kolosek.com/nesting-in-less-and-sass/) in general.

This feature is used in specific situations, not too often but too necessary when you master it.

##@mixin
To define this feature type `@mixin ` and name of your creation. After that, in CSS style - within `{}`, type all you want to be defined with it. 

     @mixin creation-name{
        property1:value;
        property2:value;
        property3:value;
     }
     
When it is defined, you should use it somewhere...To call the mixin feature, type `@include` followed by the mixin name inside of selector. 

     selector{
        @include creation-name;
     }
    
After compiling this code into CSS, it will look like this:
    
     selector{
        property1:value;
        property2:value;
        property3:value;    
     }




##Flexible Mixin
**A mixin lets you pass in an argument to make it flexible.** This is defined by adding the value after the name of the mixin. That value can be used inside of mixin (as much time as you need it).

     @mixin creation-name($value){
        property1:$value;
        property2:value;
        property3:value;
     }
After mixin is defined this way when it's called after `@include` and the creation name you must forward that value to.

     selector{
        @include creation-name(10px);
     }
After compiling...

     selector{
        property1:10px;
        property2:value;
        property3:value;    
     }
     
**You can add an infinite number of values inside of `()` separated with `,`.**     

##Where to use it
Now when you understand what it is about, you must feel that there are specific cases for it. Everyone who works with Sass (and uses it right) has his own collection and **this is mine**:

###Pseudo
When using `::before` and `::after` you'll always need these three, so we're saving two lines of code every time you use this.
    
    @mixin pseudo{
        content: '';
        display: block;
        position: absolute;
    }

###Position Center
Block [horizontal and vertical](https://kolosek.com/css-position-relative-vs-position-absolute/) centering helper (Important: you must have a parent element with `position: relative`). 

     @mixin center {
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

###Placeholders
I still believe that the mixin is invented for us to use it for browsers prefixes. This is just one example of that. 

     @mixin input-placeholder {
        &.placeholder { @content; }
        &:-moz-placeholder { @content; }
        &::-moz-placeholder { @content; }
        &:-ms-input-placeholder { @content; }
        &::-webkit-input-placeholder { @content; }
     }
        
###Breakpoints
You can use breakpoints or media queries but either way, you're going to like this. In this example, `@content` mixin feature is used. You can understand from the example that *this feature allows adding CSS inside of `@include`*.

    @mixin bp-large {
        @media only screen and (max-width: 60em) {
            @content;
        }
    }
    @mixin bp-medium {
        @media only screen and (max-width: 40em) {
            @content;
        }
    }
    @mixin bp-small {
        @media only screen and (max-width: 30em) {
            @content;
        }
    }
How to use it:

    .sidebar {
        width: 60%;
        float: left;
        @include bp-small {
            width: 100%;
            float: none;
        }
    }


Here's some other colections, you can find a lot of interesting things in:
[Andy.scss](https://github.com/gillesbertaux/andy), [bourbon](https://www.bourbon.io/), [npm](https://www.npmjs.com/package/scss-mixins-collection), and if you want the advanced option of the mixin feature check [this post](https://scotch.io/tutorials/how-to-use-sass-mixins).

##Sum up
**Make your collection and mixin it up!** (Actually, just copy/paste it into every new Sass project).

Originally published on [Kolosek Blog](https://kolosek.com/sass-mixins/).