5 Useful Sass Mixins

Sass is one of most popular CSS preprocessors at the moment. It’s so powerful, that we’ve decided to use it in all of our projects. Today, I won’t delve into all the fantastic features and capabilities of Sass. Instead, I will list the top 5 handy mixins that our team uses.

When I first tried Sass, the first thing I liked was the ability to write CSS3 properties in one line without any vendor prefixes. Mixins do it for you. You write the mixin with all the prefixes once and you don’t need to waste your time writing an excessive number of code lines in the future. A year ago, I’d have had to focus on describing mixins for CSS3 properties here, but now there’s a nice tool called Autoprefixer. IMO, this is the best tool for making your life easier. If you haven’t used it yet, you should definitely try it.

hljs.configure({languages: [‘css’, ‘scss’]});
hljs.initHighlightingOnLoad();

Now, back to mixins.

Long Shadows

Fancy long shadow icons have become really trendy lately. A short and simple mixin by Daniel Ott allows you to create such shadows quickly and elegantly. You will only need to insert the color required for the shadow into the mixin variable and the mixin is ready.

See the Pen Long Shadow Sass Mixin by Daniel Ott (@danieltott) on CodePen.

If you need more customization options, check out another cool mixin by Hugo Giraudel. It’s available here.

Triangle

If you need to create angles or triangles quickly, the Triangle mixin from the Bourbon framework has the perfect solution for you.
It’s very simple and will make your life easier when creating ordinary or elongated triangles, which are used in most projects nowadays.
Here are some use cases:

See the Pen wBqjVO by Alexey Morashko (@iMarkup) on CodePen.

Truncate Text

This simple mixin allows you to truncate text by width and add an ellipsis to represent the overflow. You don’t need to remember the whole code for truncating text, you just need to know the name of the mixin and its parameters.

These parameters are used as variables:

<u+0441>lip</u+0441> Default value. Clips the text.

ellipsis Renders an ellipsis (“…”) to represent the clipped text.

initial Sets this property to its default value.

Code:

@mixin truncateText($overflow: ellipsis){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: $overflow;
}

A sample:

See the Pen LEjMZN by Alexey Morashko (@iMarkup) on CodePen.

Clear Fix and List Reset

This is probably the most used helper and a must-have for every project.

Code:

%clearfix {
    &:after {
      content: '';
      display: table;
      clear: both;
    }
}

It has a very handy list-reset ability, which removes all margins and paddings in a list.

%listreset {
    margin: 0;
    padding: 0;
    list-style: none;
}

Use:

.block {
    @extend %clearfix;
}
ul {
    @extend %listreset;
}

This will result in the following CSS output:

.block:after {
    content: '';
    display: table;
    clear: both;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

Media Queries with Superpowers

Here’s a simple and cool mixin for writing beautiful and elegant media queries.

Name your breakpoints so they are understood by all team members.

$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
)

They will be invoked using a simple syntax.

.responsive {
    @include mq($from: mobile) {
      background-color: white;
      color: $blue;
    }  
    @include mq(tablet, desktop) {
        background-color: $green;
        color: $gray;
    }  
    @include mq($from: desktop) {
      background-color: $yellow;
      color: $red;
    }
}

If you want to display the currently active breakpoint in the top right corner of your site during development, add the breakpoints to this list, ordered by width, e.g. (mobile, tablet, desktop).

$mq-show-breakpoints: (mobile, tablet, desktop, wide);

Below you can see a use case for this.

See the Pen zxdeLP by Alexey Morashko (@iMarkup) on CodePen.

As you can see, everything is convenient and pretty simple. I hope these mixins will help you as much as they help our team. Don’t hesitate to ask us any questions in the comments below!

Sass FTW!