A collection of sass mixins

Sass has been into our lives for many years and through time has lost some of its glory with tools like postcss, so this post might be a bit out of fashion, but who cares Sass lovers still exist!

This blogpost concerns all of you who are trying to simplify your coding experience with sass tools like mixins. Prepare yourself for a 4+1 kind of post, a collection of 4 of my favorite mixins and a function.

#1 Centering mixin (with flex)

This one is pretty clearforward. A simple mixin for centering (vertical, horizontal or both) child elements.

          
            

            @mixin center($position) {
              display: flex;

              @if $position == 'both' {
                align-items: center;
                justify-content: center;
              }

              @else if $position == 'vertical' {
                align-items: center;
              }

              @else if $position == 'horizontal' {
                justify-content: center;
              }

              @else if $position == 'none' {
                align-items: stretch;
                justify-content: flex-start;
              }
            }

            // An example

            div {
              @include center(vertical);
            }
          
        

An example:

See the Pen centering mixin(flex) by Vangel Tzo (@srekoble) on CodePen.

If you find yourself troubled because of flexbox limited support you can always fallback to transform: translate() solution. An example here.

#2 Overlay upon image mixin

This is a not so common mixin but it is pretty useful when you want to apply an overlay upon a background image.

          
            @mixin overlay($image, $color, $amount) {
              background: linear-gradient(rgba($color, $amount), rgba($color, $amount)),
                          url(#{$image}) center no-repeat;
            }

            div {
              @include overlay('mountains.jpg', #000, .4);
              ...
            }
          
        

An example:

See the Pen Overlay upon image mixin by Vangel Tzo (@srekoble) on CodePen.

If you're searching for alternatives solutions to create the same effect like blend mode you can have a look at my post here.

#3 Text truncate mixin

Another useful mixin in situations where you want to truncate a paragraph into specific number of rows or truncate a wording on a specific width.

          
            @mixin truncate($rows, $width:'') {
              overflow: hidden;

              @if $rows == 1 {
                @if $width !='' {
                  max-width: $width;
                }

                white-space: nowrap;
                text-overflow: ellipsis;
             }

              @else if $rows > 1 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: $rows;
                -webkit-box-orient: vertical;
              }
            }

            // An example

            p {
              @include truncate(1, 100px);
              // or
              @include truncate(3);
            }
          
        

An example:

See the Pen Text truncate mixin by Vangel Tzo (@srekoble) on CodePen.

This is a webkit only mixin since we use webkit-line-clamp. We could always provide a fallback with other techniques like here.

#4 Color theme mixin

Have I caught your attention? Nice, this mixin is one of my favourites. In a few words, this mixin can create a color theme based on a base color. It provides a text color based on the background lightness and creates automatically a hover state (with a litle bit darker background). It is useful for buttons, cards etc.

          
            @mixin color-theme($base-color) {
              background: $base-color;

              @if (lightness($base-color) > 50) {
                color: #000;
              }

              @else {
                color: #fff;
              }

              &:hover,
              &:target,
              &:focus {
                background: darken($base-color, 10);
              }
            }

            a {
              @include color-theme(red);
            }
          
        

An example:

See the Pen color-theme mixin by Vangel Tzo (@srekoble) on CodePen.

For a better implementation according to well contrasted colors have a look at this.

Oh! The z-index function

Sass functions are a powerful tool since we can solve problems like: calculation from px to rem or apply a gradient color. But lets see a way to manage z-index values nice and neat.

          
            @function z-index($layer) {
              @if map-has-key($layers, $layer) {
                @return map-get($layers, $layer);
              }

              @else {
                @return null;
              }
            }

            $layers: (
              "top":             100,
              "modal":           40,
              "navigation":     30,
              "header":          20,
              "footer":           20,
              "default":          10,
              "bottom":          -1
            );

            .modal {
              z-index: z-index(modal); // z-index: 40;
            }
          
        

An example:

See the Pen zindex mixin by Vangel Tzo (@srekoble) on CodePen.

So what we did here was to store our z-index values in a sass map and use them with the function. All we have to do is to keep a base hierarchy on z-index values (I suggest decades) and update consistently.

This was the collection of 4+1 sass mixins that I found useful. I hope you find them too. Till next time..

Tweet