Top 8 SASS Mixins to Speed Up Your Frontend Development Process

One of the challenges in a developer’s life is speeding up and automating the development process while keeping high-quality standards. A great solution for front-end developers using SASS is its mixin capability.

First of all, why is it good to use mixins, and how can it help you?

You should use mixins because it lets you make groups of CSS declarations that you want to reuse through your website.

Also, you can pass in values to make your mixin more flexible. Mixins are good because they make your code cleaner, and they are in the same file, so you can easily find them.

What Is SASS (SCSS)?

SASS is an extension of CSS that allows you to use things like variables, nested rules, mixins, functions, etc. It makes your CSS cleaner and enables you to create style sheets faster. It is compatible with all versions of CSS. It is the most mature, stable, and powerful CSS extension in the world.

What Is the Difference Between SCSS and SASS?

SASS is a pre-processor scripting language that compiles into CSS, while SCSS is the main syntax for the SASS, which builds on top of the existing CSS syntax.

SCSS example:

SASS example:

What Is Mixin in SASS?

Mixin is a directive that lets you create CSS code that is reused throughout the website. A mixin allows you to make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

In my opinion, mixins are the biggest feature because it allows you to write cleaner code.

How to Use Mixins?

You have to use @include followed by the name of the mixin and a semi-colon.

Example of usage

After compiling this SCSS code into CSS, our CSS file should look like this.

You can try our mixins in an online compiler.

And, the Mixins…

1. Fluid Typography

We use this mixin for responsive typography because we can avoid unnecessary media queries. It saves you a lot of time and minifies your CSS code.

You don’t have to worry about line-height because we’ve extended the mixin, and it automatically calculates your line-height.

Source: CSS-Tricks

Example of usage

The first two arguments are for screen resolutions from which the font will be responsive. The last two arguments are for the smallest and largest font size.

2. Media Queries for Mobile-First Design

This mixin is a time saver and simple for writing beautiful media queries. Name your breakpoints, so they are understood by all team members. You can use pixel values, but we have some default breakpoints setup that works great.

Example of usage

3. Text Shortening

Adding an ellipsis to text is not simple. But when you have this great mixin, it’s quite simple, and it can come in handy when you’re working with a lot of text, especially on small screen resolutions.

Source: DeveloperDrive

Example of usage

If you want to add an ellipsis to text with multi-lines, you only need to pass one argument.

For a single line, just leave it empty.

4. Placeholders

Usually, the problem with placeholders is that you have to write support for all browsers. Luckily this mixin sorts it out for you.

@content allows us to pass a content block into a mixin.

Source: engage

Example of usage

5. Flexbox Toolkit

You should use this mixin if you are using flexbox way too much. If you have a problem knowing which one represents the main axis and which one the cross axis, this is a perfect mixin for you. It is pretty simple to use because the names are self-descriptive.

Example of usage

6. Z-Index

Technically this is a pure function, not mixin. But I felt it’s worth being on the list because “z-index” is mostly misunderstood. Most developers use values like “999999”, just because they don’t really understand “z-index”.

It’s so easy to lose track of z-index values when working in several different files. We started using it because everything is stored in one place and is easy to edit.

Source: engage

Example of usage

7. Position

It is not hard to position an element with CSS, but you can save a lot of time and few lines of code. It allows you to specify the position of element and values for the four directions: top, right, bottom, left, and z-index in just one line.

Example of usage

In this example, we use our “z-index function”

8. Responsive Ratio

The responsive ratio is not supported for all browsers. We use this to lock the aspect ratio of an element or make it fit content if it exceeds the aspect ratio’s boundaries.

Source: engage

Example of usage