13 Amazing SASS (SCSS) Mixins We Use On Every Website

We absolutely love Sass (SCSS), it’s such a massive time-saver and makes building front-end design such a breeze!

There are many JavaScript tools for working with files and automating other tasks, but Sass’s built-in mixin capabilities allow one to write modular front-end style code. In this article, we have listed thirteen of our favourite Sass mixins for automating the writing of web styles.

The mixins we will be covering in this article are the following:

Media Breakpoints
Retina Images
Clearfix
Box Sizing
Border Radius
Opacity
Center Block
Text Overflow
Font Size
Line Height
Transitions
Calc
Converting Tracking to Letter Spacing

If you want to just simply download the Sass Mixin you can click here.

Alternatively, you can copy and paste this below:

Note: If you continue reading, you will find a breakdown of all the mixins, what they do and how to use them


/* Breakpoints
-------------------------*/

@mixin breakpoint($point) {
  @if $point == xl {
    @media (max-width: 75em) { @content; }
  }
  @else if $point == minxl {
    @media (min-width: 75em) { @content; }
  }  
  @else if $point == lg {
    @media (max-width: 62em) { @content; }
  }
  @else if $point == md {
    @media (max-width: 48em)  { @content; }
  }
  @else if $point == sm {
    @media (max-width: 34em)  { @content; }
  }  
  @else if $point == mobile {
    @media (max-width: 25em)  { @content; }
  }  
  @else if $point == mobilexs {
    @media (max-width: 21.875em)  { @content; }
  }      
}

/* Retina Images
-------------------------*/

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

/* Clearfix
-------------------------*/

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

/* Box Sizing
-------------------------*/

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

/* Border Radius
-------------------------*/

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

/* Opacity
-------------------------*/

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

/* Center Block
-------------------------*/

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

/* Text overflow
-------------------------*/

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Font Size
-------------------------*/

@mixin font-size($size: 12, $base: 16) {
    font-size: $size + px;
    font-size: ($size / $base) * 1rem;
}

/* Line Height
-------------------------*/

@mixin line-height($height: 12, $base: 16){
    line-height: $height + px;
    line-height: ($height / $base) * 1rem;
}

/* Transitions
-------------------------*/

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }
    
    @return $prefixed;
}


@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }
      
    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}

Media Breakpoints

Media queries allow you us to easily add breakpoints to our stylesheet. With those, we can quickly define custom responsive behaviour for any element within several different breakpoints.

This works perfectly on its own or with popular grid frameworks such as Bootstrap.

The if statement allows us to change any properties of elements based on the size of the screen. This allows you to easily change the behaviour of your CSS attributes for the breakpoints you wish to define.

With the Sass mixins we supplied above, we typically add a new file called responsive.scss and the way we use this is as follows:


@include breakpoint(minxl) { /* Min 1200px */
    /* Add code Here */
}

@include breakpoint(xl) { /* Max 1200px */

}

@include breakpoint(lg) { /* 992px */

}

@include breakpoint(md) { /* 768px */

}

@include breakpoint(sm) { /* 575px */

}

Clearfix

We can apply the clearfix css property easily to any element.

This mixin will definately benefit you whenever you have content floating both to the left and right and want to clear the space below the floated element to insert new content below. We use this as follows:


.element {
    @include clearfix();
}

Box Sizing

box-sizing border-box is a great way to handle the pesky box model issue that comes with setting padding to your layouts. It works from IE8+.

Example usage:


*,
*:after,
*:before {
    @include box-sizing(border-box);
}

Border Radius

Like all other mixins with featured, this is all about saving time. The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. Like a lot of examples we have showcases, there are ways to add certain CSS properties so they work cross-browser. So to avoid constantly having to write several lines of codes just do make a cross-browser border-radius, we can define this is just one simple line of code as follows:


.element {
    /* For even border-radius */
    @include border-radius(20px);

    /* For different border-radius values */
    @include border-radius(20px, 10px, 5px, 25px);
}

Opacity

The opacity property sets the opacity level for any type of element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 which is 50% see-through, and 0 which is completely transparent.

To use this Sass mixin we can use the below code:


.element {
    @include opacity(0.5);
    /* or */
    @include opacity(50%);
}

Both examples above are the same, it's just a matter of preference. The above will both show the .element with 50% transparency. One as an integer from 0 to 1, the other as a percentage from to 100%.

Center Block

If we have an element in which we need to centre without affecting the margin-top and margin-bottom properties we can use our Center Block mixin. This basically centred an element in the middle of its parent container. To use this we can simply use:


.element {
    @include center-block;
}

Text Overflow

The text-overflow CSS property sets how hidden overflow content is signalled to users. It can be clipped, display an ellipsis (' … '), or display a custom string of your choice.

As always, we can avoid writing three lines of code by just writing the following to any element:


.element {
    @include text-truncate;
}

With this mixin, we can set a rem font size to all-our elements by just defining the font-size. 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. By using this, you will drastically automate your typography coding workflow.

The beauty of this as most of these mixins is that it is cross-browser. This mixin creates a pixel fallback from browsers that don't support rem such as IE8 and below. When the browser doesn't support rem sizing, the mixin will use the pixel equivalent and set the output in both rem and px value for any given element. We use this as follows:


.element {
    @include font-size(16);
}

Line Height

This works in the exact same way as the Font Size mixin describes above. The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

We use this mixin as follows:


.element {
    @include line-height(24);
}

Transitions

With this, we can easily define animation properties and add them to any element. As of right now, the animation CSS property still needs vendor prefixes, so this will also automatically add that to the CSS in a much quicker way.

This can be time-consuming if you like to use a lot of animation on your website as you have to write a lot of CSS code to make it work cross-browser.

We can use this quite simply with our Sass mixin as follows:


.element {
    @include transition(transform 0.2s ease-in 0.2s, opacity 0.2s ease);
}

Calc

The calc() CSS function lets you perform calculations when specifying CSS property values.

Again, when using calc you have to add several lines of code to make it work cross-browser. Now we can use this as simply as:


.element {
    @include calc( width, '100% - 100px');
}

Converting Tracking to Letter Spacing

If you've used applications such as Photoshop or Illustrator, for example, you will notice that they use 'Tracking' which is essentially the same as letter-spacing. They are calculated differently and so we created a way to make the conversion without having to think about it. If you develop a lot of websites based on PSD's, this will save you quite a bit of time.

We can simply use this as follows:


.element {
    @include tracking(100);
}

This will convert the tracking of the given element to the correct letter-spacing value in pixels. If you want to read more about this you can read an article we wrote specifically on this here: How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Conclusion

Using Sass mixins like the ones we have outlined above in this article is a great way of making your workflow more efficient and will significantly reduce the amount of time you spend writing CSS code.

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.

We hope you enjoyed this article, if you've decided to use this in your project, let us know!

Do you have any other great Sass mixins you use? Let us know in the comments below.

WordPress / Web Development Tutorials
(Best WordPress Tutorials)