Tutorial

Shorthand Sass Mixins

Published on April 9, 2019
    Default avatar

    By Chris DeMars

    Shorthand Sass Mixins

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    Ever since I started writing Sass I’ve always loved using mixins. Instead of duplicating style declarations a mixin will handle that for you in one fell swoop. Mixins are a very powerful feature of Sass that we don’t have in the CSS spec… Yet! Luckily, as long as Sass is still around and more company’s adopt it, the more code can stay DRY and modular within the codebase.

    Let’s see how this works with the .sass syntax example I have below!

    There are two types of Sass you can write. .scss which uses semi-colons and curly braces and .sass which doesn’t make use of those characters.

    The Scenario

    Let’s say you have many components on a page, possibly some type of card component laid out in a grid. And that card, or parent component has children that are all horizontally and vertically centered within it. No matter how you shake it, these children will always be vertically and horizontally centered.

    How many times have we used different types of hacks to achieve one of the most difficult things we have had to do in the history of CSS? I know, that struggle was real, but today we can achieve that in just three lines of code! Don’t believe me?

    We’re going to couple the flexbox properties with the mixins shorthand to create a block of code that can be used all over the place if need be.

    The great thing about mixins is that we can create multiple mixins for different scenarios and just swap them out where necessary.

    The Code - Before

    A lot of times, the syntax we use to create mixins reflect the examples below.

    @mixin center-content
      display: flex
      justify-content: center
      align-items: center
    
    .parent-container
      @include center-content
    

    We declare a mixin using the @mixin syntax followed by the mixin name. We than follow that by the styles that will be applied when we use it.

    When we decide to use that mixin, we add @include followed by the name of the mixin, within our class. This compiles down to this:

    .parent-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    The Code - After

    Instead of using the “@” symbol to declare the mixin and include it, we can start using the “=” and “+” symbols as shorthands respectively when using the .sass syntax.

    We can do the same exact thing as above, using this awesome shorthand.

    =center-children
      display: flex
      justify-content: center
      align-items: center
    
    .parent-container
      +center-children
    

    Creating mixins this way is just a faster way of doing it. The code above compiles down to this:

    .parent-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    Pretty neat right? There are so many cool tricks and things you can do with Sass that you still can’t do with CSS, but that’s rapidly changing. CSS is amazing and I’m proud to consider myself a CSS developer. CSS is starting to implement some of the cool things that Sass, Less, and Stylus can do like CSS variables (Custom Properties). Even support for CSS Nesting should be coming soon!

    Wrapping Up

    I hope you enjoyed this snippet of knowledge if you are writing your CSS styles using the Sass preprocessor. Like I said, check out the Sass docs for all the awesome things you can do. And don’t forget, CSS is amazing and it isn’t going anywhere!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Chris DeMars

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel