jugal13
Writing reusable SCSS using mixins & functions

Writing reusable SCSS using mixins & functions

This article focuses on the features of mixins and functions

Jugal Wadhwa's photo
Jugal Wadhwa
·

5 min read

Table of contents

Hello world. Let's continue learning about SASS and how to use mixins and functions in SASS.

In the previous article we learnt about SASS modules. Let's have a look at writing reusable styling across all components of a webpage through the use of mixins and functions.

SASS has extended concepts to enable developers to write styling in a more efficient manner. This includes writing reusable code through the concept of mixins and functions.

Mixins allow creating reuable styles by allowing you to write groups of declarations using the @mixin rule. This reusable piece can help avoid writing non sematic classes. Mixins have the advatage of arguments and nesting.

  1. To use a mixin we use @include rule.
  2. The mixin reset-list is removing the default styling of lists.
  3. The mixin is then nested inside the mixin horizontal-list using @include
  4. horizontal-list mixin is holding it's own nested styling to allow list items to be displayed in a row or inline.
  5. This mixin can now be used anywhere where there is a list of items to be displayed in a row like a navigation bar. This is used inside the selector nav ul

SCSS CSS 
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}


Mixins can be customised to behave differently each time through the use of arguments. Arguments are required and therefore have to be passed.

For example: the theme mixin can be used to generate classes based on the colour passed to it.

SCSS CSS 
$primary: #04d26e;
$warn: #e7df34;
$error: #e73434;
$success: #0bc52a;

@mixin theme($theme) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, 0.25);
  color: #fff;
}

.primary {
  @include theme($primary);
}

.warn {
  @include theme($warn);
}

.error {
  @include theme($error);
}

.success {
  @include theme($error);
}


.primary {
  background: #04d26e;
  box-shadow: 0 0 1px rgba(4, 210, 110, 0.25);
  color: #fff;
}

.warn {
  background: #e7df34;
  box-shadow: 0 0 1px rgba(231, 223, 52, 0.25);
  color: #fff;
}

.error {
  background: #e73434;
  box-shadow: 0 0 1px rgba(231, 52, 52, 0.25);
  color: #fff;
}

.success {
  background: #e73434;
  box-shadow: 0 0 1px rgba(231, 52, 52, 0.25);
  color: #fff;
}


Mixins have the advantage of optional arguements which are achieved by passing default values to the parameters of the mixin.

For example having a default value for placeholder colour and overriding if necessary

SCSS CSS 
$black: #111;
$default: #adadad;

@mixin placeholder-color($theme: $default) {
  &::placeholder {
    color: $theme;
  }
}

.default-placeholder {
  @include placeholder-color();
}

.black-placeholder {
  @include placeholder-color($black);
}


.default-placeholder::placeholder {
  color: #adadad;
}

.black-placeholder::placeholder {
  color: #111;
}


Content Blocks

The next feature supported by mixins are content blocks. It allows a user to embed an entire block of styles. It is decalred using the @content rule. For example we can create a mixin for responsive design media query that we can use throughout our application following a mobile first approach.

SCSS CSS 
@mixin desktop {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

.container {
  width: 100%;
  padding: 1rem;

  @include desktop {
    max-width: 900px;
    margin: 0 auto;
  }
}


.container {
  width: 100%;
  padding: 1rem;
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 900px;
    margin: 0 auto;
  }
}


Functions defined using the @function rule can be used to perform complex operations and return a single value using @return rule.

$font-weights: (
  "light": 300,
  "regular": 400,
  "bold": 700,
);

@function weight($weight-name) {
  @return map-get($font-weights, $weight-name);
}

.heading {
  font-weight: weight("bold");
}


.heading {
  font-weight: 700;
}


SASS provides a library of built in functions that we can access using the module system. We can import the module using the @use rule. These libraries beging with sass: indicating that they are a part of SASS itself.

The modules that are a part of the SASS library include

  1. sass:math - module provides functions that operate on numbers.

  2. sass:string - module makes it easy to combine, search, or split apart strings.

  3. sass:color - module generates new colors based on existing ones, making it easy to build color themes.

  4. sass:list - module lets you access and modify values in lists.

  5. sass:map - module makes it possible to look up the value associated with a key in a map, and much more.

  6. sass:selector - module provides access to Sass’s powerful selector engine.

  7. sass:meta - module exposes the details of Sass’s inner workings.

We've learnt how mixins and functions can be used to avoid repetition and create more reusable code. Taking advantage of mixin and function arguments allows more customisability. This approach thus let's use follow the DRY principle. Let's have a look at conditionals in the next post.

SassscssCSS