Sass Mixins To Get You Started On The Next Project

If you are unaware of some of the features of Sass that can help speed up your front-end development then I would recommend reading this article on How To Get Started With Sass. One of the best features of using Sass is the ability to create functions for reusable code called mixins. Using these mixins you can create chucks of CSS that you can reuse on any of your projects which helps keep your CSS DRY (Don't Repeat Yourself). Below are a few Sass Mixins you can use to get started on your next project.

Background Gradients

Here is a mixin you can use to create background gradients. It has 3 parameters to the mixin the start colour, end colour and the orientation of how you want the gradient to be display. The orientation options are vertical, horizontal or if nothing is supplied then the gradient to will be radial.

@mixin background-gradient($startColor, $endColor, $orientation = '') {
    background: $startColor;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $startColor, $endColor);
      background: linear-gradient(to bottom, $startColor, $endColor);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $startColor, $endColor);
      background: linear-gradient(to right, $startColor, $endColor);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $startColor, $endColor);
      background: radial-gradient(ellipse at center, $startColor, $endColor);
    }
}

To use this in your stylesheets you can use the below code.

.box-vertical
{
  @include background-gradient(#000, #FFF, 'vertical');
}

.box-horizontal
{
  @include background-gradient(#000, #FFF, 'horizontal');
}

.box-radial
{
  @include background-gradient(#000, #FFF, 'radial');
}

Center Element

Here is a Sass mixin you can use center any element by changing it to a block element and setting the margin left and right to auto.

@mixin center-element {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

To use this you can use the following code.

.box
{
  @include center-element;
}

Vertically Centred

Here is a Sass mixin you can use to vertically center any element by using flexbox.

@mixin vertically-centred
{
    display: flex;
    align-items: center;
    justify-content: center;
}

To use this you can use the following code.

.box
{
  @include vertically-centred;
}

Clearfix

Use the below mixin for quickly clear fixing your HTML elements.

@mixin clearfix {
    *zoom: 1;

    &:before, &:after {
        content: ' ';
        display: table;
    }

    &:after {
        clear: both;
    }
}

To use this you can use the following code.

.box
{
  @include clearfix;
}

Rem To Pixel With Fallback

The REM CSS unit is widely supported on most modern browsers but it's not supported in IE8 and lower browsers, for unit values to work in both modern browsers and IE8 we will need to duplicate the property in the CSS. Instead of repeating ourself everywhere in the CSS we can use a Sass Mixin for our REM property and pixel fallback.

@mixin rem2px($property, $sizeValue: 1.6) {
  #{$property}: ($sizeValue * 10) + px;
  #{$property}: $sizeValue + rem;
}

To use this you can use the following code.

.box
{
  @include rem2px(font-size, 1.4);
}

Positioning

Use the below mixin to change the position of an element.

@mixin position($type, $top: null, $right: null, $bottom: null, $left: null) {
    position: $type;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

To use this you can use the following code.

.box
{
  @include position(absolute, 10px, 10px, 10px, 10px);
}

Size

Here is a quick mixin to quickly set the size of an element.

@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}

To set an element to be the same width and height

.box
{
  @include size(300px);
}

Or for different height and width.

.box
{
  @include size(300px, 600px);
}

Vendor Prefix

If you are using CSS properties that need browser prefixes added to them then you can use this prefix mixin to add the required prefixes to the CSS property.

@mixin prefix($property, $value, $vendors: webkit moz ms o) {
      @if $vendors {
        @each $vendor in $vendors {
          #{"-" + $vendor + "-" + $property}: #{$value};
        }
      }
      #{$property}: #{$value};
}

To use this you just need to add the first parameter as the property you want to add, then the second property as the value, then the third property will be prefixes that you want to add to the property.

.element {
  @include prefix(transform, rotate(90deg), webkit ms);
}

No Padding Lists

Whenever I start a new project I tend to always remove the default padding from list items therefore I use this class and extend this on my lists.

.nopadding-list
{
  list-style: none;
  padding: 0;
  margin: 0;
}

To use this you simply need to extend this class on your list items.

header
{
  ul
  {
    @extend .nopadding-list;
  }
}