“program script digital wallpaper” by Maik Jonietz on Unsplash

SASS mixin to the rescue

Satyajit Rout
Sep 8, 2018 · 4 min read

Prior to using Sass my CSS workflow was very difficult to manage. If you’ve been in the development world for a few years, you probably came from the land of writing CSS in repetitive selectors like me. Having to manually type each and every style out often makes me take the technology we have today for granted.Sass has many features, but my favourite are mixins. These little devils save so much time and effort that I had to take some time to curate a list of what I’ve been using .

Sass mixins are blocks of code that you define once and can then re-use anywhere, they are super useful when you want really clean and efficient code.We start with some basic mixin.

Transitions

Transition mixin to add prefix so we don’t have to write it repeatedly for browser support.

@mixin transition($args) { 
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}

Usage:

@include transition(ease-in-out .3s background-color);

Responsive Breakpoints

Responsive design is a must this day and age. What better way to adapt your designs than to have a pre-defined set of mixins for your breakpoints?You can add as many as you want depend on your requirement.

// breakpoint screen widths 
$large: 1390px;
$medium: 767px;
$small: 480px;
@mixin bp-large {
@media only screen and (max-width: $large) {
@content;
}
}
@mixin bp-medium {
@media only screen and (max-width: $medium) {
@content;
}
}
@mixin bp-small {
@media only screen and (max-width: $small) {
@content;
}
}

Writing these in your code would look like this:

#myElement { 
@include bp-medium {
// super neat SCSS/SASS code goes here
}
}

Flex Direction

  • Values: row | row-reverse | column | column-reverse
  • Default: row

Source

@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}

Usage:

.class { 
@include flex-direction(row);
}

Flex Order

The order property controls the order in which the flex items appear within the flex container.

Source

@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}

Font Unit Conversion

It’ll be easer to convert to px within conversion mixin

//function to px to rem or rem to px$font: 16px;@function font-units($value) {  $font-new: strip-unit($font);  @if type-of($value)=="number" {   @if (unitless($value)) {      @return $value;   }   @else if unit($value)=="rem" {      @return #{($value / 1rem)*$font-new}px;   }   @else if unit($value)=="px" {      @return #{($value / 1px)/$font-new}rem;   } } @else {    @warn "Not a number value: #{$value}";    @return $value; }}

Usage:

.class { 
font-size: font-units(16px); //1rem when default value 16px
}

Multiple rem to px conversion

//multiple px to rem conversion@mixin rem($property, $px_values) {    $base: ($font / 1rem);    #{$property}: $px_values;    @if type-of($px_values)=='number' {      #{$property}: $px_values / $base;    }    @else {      $rem_values: ();      @each $value in $px_values {         @if $value==0 {           $rem_values: append($rem_values, $value);         }         @else {           $rem_values: append($rem_values, ($value / $base));         }      }      #{$property}: $rem_values;   }}

Usage:

.class { 
@include rem(padding,16px 32px); //1rem 2rem //default value 16px
}

Vendor Prefixing

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

Usage:

@include prefix(transform, rotate(42deg), webkit ms);

Animations and and keyframes

@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}

Usage:

@include animation('slide-left 5s 3');

Mixins can be simple as hell or as advanced as you’d like. If you want to take things to the next level you can introduce loops, functions, and more inside your mixins to easily style elements which help benefit your application. The main thing to remember is if you are ever in a scenario where you find yourself using multiple styles across multiple elements, then you should probably be using a mixin.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade