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)?

What is the difference between SCSS and SASS?

SCSS example:

/* .scss file */
$background-color: #eeeeee;
$font-color: #333333;
$font-size: 24px;

/* Use the variables */
body {
background-color: $background-color;
color: $font-color;
font-size: $font-size;
}

SASS example:

/* SASS */
$background-color: #eeeeee;
$font-color: #333333;

body
color: $font-color
background: $background-color

What is mixin in SASS?

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

How to use mixins?

Example of usage

h1 {
font-size: 14px;
line-height: 22px;
@include respond-above(md) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}

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

h1 {
font-size: 14px;
line-height: 22px;
@media only screen and (min-width: 768px) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}

You can try our mixins in an online compiler.

And, the mixins…

1. Fluid typography

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

@mixin fluid-font($min-width, $max-width, $min-font-size, $max-font-size) {
$unit1: unit($min-width);
$unit2: unit($max-width);
$unit3: unit($min-font-size);
$unit4: unit($max-font-size);
@if $unit1 == $unit2 and $unit1 == $unit3 and $unit1 == $unit4 {
& {
font-size: $min-font-size;
line-height: $min-font-size * 1.618;
@media screen and (min-width: $min-width) {
font-size: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
);
line-height: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
1.618 *
((100vw - #{$min-width}) / #{strip-unit($max-width - $min-width)})
);
}
@media screen and (min-width: $max-width) {
font-size: $max-font-size;
line-height: $max-font-size * 1.618;
}
}
}
}

Source: CSS-Tricks

Example of usage

@include fluid-font(320px, 1024px, 22px, 55px);

2. Media queries for mobile-first design

$breakpoints:  (
"xs": 25em, // 400px
"sm": 34em, // 544px
"md": 48em, // 768px
"lg": 60em, // 960px
"xl": 80em, // 1280px
"xxl": 90em // 1440px
);

@mixin respond-above($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get($breakpoints, $breakpoint);
// Write the media query.
@media (min-width: $breakpoint-value) {
@content;
}
// If the breakpoint doesn't exist in the map.
}
@else {
// Log a warning.
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}

Example of usage

h1 {
font-size: 14px;
line-height: 22px;
@include respond-above(md) {
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
}

3. Text shortening

// Default line-clamp is 1
@mixin text-shorten($numLines: 1) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

@supports (-webkit-line-clamp: $numLines) {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: $numLines;
-webkit-box-orient: vertical;
}
}

Source: DeveloperDrive

Example of usage

@include text-shorten(3);

For single line just leave it empty

@include text-shorten();

4. Placeholders

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

@mixin placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

Source: engage

Example of usage

input, 
textarea {
@include input-placeholder {
color: #333333;
}
}

5. Flexbox Toolkit

@mixin flex-column {
display: flex;
flex-direction: column;
}

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

@mixin flex-center-column {
@include flex-center;
flex-direction: column;
}

@mixin flex-center-vert {
display: flex;
align-items: center;
}

@mixin flex-center-horiz {
display: flex;
justify-content: center;
}

Example of usage

.main-container {
height: 100vh;
@include flex-center
.centered-item {
width: 100%;
max-width: 400px;
}
}

6. 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.

// breakpoint var (first in array is the largest number, etc array.length)
$z-indexes: (
"modal",
"sidebar",
“header”
);

@function z-index($name) {
@if index($z-indexes, $name) {
@return (length($z-indexes) - index($z-indexes, $name))+1;
}
@else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@return null;
}
}

Source: engage

Example of usage

.header {
z-index: z-index(‘header’);
}

7. Position

@mixin position($position: absolute, $top: null, $right: null, $bottom: null, $left: null, $z-index: initial) {
position: $position;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
z-index: $z-index;
}

Example of usage

.element-absolute {
@include position(absolute, 60px, 0, 0, 0, z('modal'));
}

8. Responsive ratio

@mixin ratio($x,$y, $pseudo: false) {
$padding: unquote( ( $y / $x ) * 100 + '%' );
@if $pseudo {
&:before {
@include pseudo($pos: relative);
width: 100%;
padding-top: $padding;
}
} @else {
padding-top: $padding;
}
}

Source: engage

Example of usage

img {
@include ratio(16, 9);
}

We are a team of creative and talented individuals who build reliable, UX oriented, and custom-tailored digital products and provide real-time customer service.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store