Go to the profile of Reyraa
Reyraa

Useful mixins for SASS users

As a frontend developer, there are some tools and extensions I’ll never forget the first day I learned to used them. SASS is one of those angels!
I have a set of SASS mixins that I usually insert into each project I start. And I enjoy improving them as needed in projects. Here in this article I’ll share some of them with you.

The one I love most!

You’ve used sprite images already. Sprites are not intended to be repeated, those images URLs are the same and the only difference between them is their background positions.

So, to be DRY, you only need to define a background-position just like:

@include sprite(20px, 40px);

And easily the mixin would be:

@mixin sprite($x, $y) {
    background-image: url(‘../images/sprite.png’);
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: $x $y;
}

Although defining all properties related to background inside the mixin makes the usage very simple, but keep in mind those 4lines will repeat in all of your usages in final css file, resulting in bigger css file. But you can separate first 3 properties in a separate class name and add it to the element for which you need a sprite background. But this approach has its drawbacks too: it’s not usable for pseudo elements.

Size of elements

Most of the block and inline-block elements need width and height properties.

I use size and square mixins to make them easy to find through other properties.

@mixin size ($width, $height) {
    height: $height;
    width: $width;
}
@mixin square ($size) {
    height: $size;
    width: $size;
}

the square mixin defines an element with equal width and height. If you use percentage values, probably the result won’t be a visually square element.

Linear gradient

Linear gradients are supported by all of modern browsers as well as most of old browsers too. But there are 4 different syntaxes for different browsers. see below:


background: rgb(206,219,233); /* Old browsers */
background: -moz-linear-gradient(left, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6–15 */
background: -webkit-linear-gradient(left, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10–25,Safari5.1–6 */
background: linear-gradient(to right, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#cedbe9', endColorstr=’#26558b’,GradientType=1 ); /* IE6–9 */

I've generated this gradient using lovely Colorzilla tool and the result is:

CSS gradient result

This is another case that mixins make life sweeter! let’s just go through it.

There is a easy way that compass brings


background-color: rgb(206,219,233); // Old browsers
@include filter-gradient(#cedbe9, #26558b, horizontal); // IE6–9
@include background-image(linear-gradient(left, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%));

And if for any reasons you don’t want to use compass, you can have your own. going deeper you’ll see the difference in syntaxes is basically in the starting direction of them. Firefox uses -moz- vendor prefix for versions 3.6–15, Chrome versions 10–25 and Safari versions 5.1–6 use -webkit- vendor prefix, while other major browsers use W3C standard syntax.

Initiate local variables

    $typeValue: ‘’;
    $typeValueW3C: ‘’;

Radial gradient uses $typeValue for vendor syntaxes and $typeValueW3c for standard W3C syntax

    @if $direction == ‘radial’ {
        $typeValue: center, ellipse cover;
        $typeValueW3C: ellipse at center;
     }

For both vertical and horizontal gradients vendor syntaxes define the start direction as parameter while W3C syntax tells the point gradient is going "to end" at.

    @if $direction == ‘vertical’ {
        $typeValue: top;
        $typeValueW3C: to bottom;
    }
    @if $direction == ‘horizontal’ {
        $typeValue: left;
        $typeValueW3C: to right;
    }

You may use values in degrees for the direction parameter too but keep in mind, W3C syntax leads 180deg for minus values.

    @if (type-of($direction) != string) {
        $typeValue: $direction;
        $typeValueW3C: $direction;
        @if $direction < 0 {
            $typeValueW3C: $direction + 180deg;
        }
    }

now let's use those values:

    /* FF3.6–15 */
    background: -moz-linear-gradient($typeValue, $colors);
    /* Chrome10–25,Safari5.1–6 */
    background: -webkit-linear-gradient($typeValue, $colors);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: linear-gradient($typeValueW3C, $colors);

So the whole mixin would be:

@mixin gradient ($direction, $colors…) {
    $typeValue: ‘’;
    $typeValueW3C: ‘’;

    @if $direction == ‘radial’ {
        $typeValue: center, ellipse cover;
        $typeValueW3C: ellipse at center;
    }
    @if $direction == ‘vertical’ {
        $typeValue: top;
        $typeValueW3C: to bottom;
    }
    @if $direction == ‘horizontal’ {
        $typeValue: left;
        $typeValueW3C: to right;
    }
    @if (type-of($direction) != string) {
        $typeValue: $direction;
        $typeValueW3C: $direction;
        @if $direction < 0 {
            $typeValueW3C: $direction + 180deg;
        }
    }
    background: -moz-linear-gradient($typeValue, $colors);
    background: -webkit-linear-gradient($typeValue, $colors);
    background: linear-gradient($typeValueW3C, $colors);
}

Middle aligner

If you still need to support older browser — We all need to think about our bills — so you might use pseudo elements for vertically align some elements in their parents.

I’d like to use a mixin for that:

@mixin middle-aligner () {
    content: ‘’;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

The usage is absolutely sensible.

.parent {
    width: 100%;
    height: 300px;
    .child {
        display: inline-block;
        width: 150px;
        height: 100px;
        @include middleAligner();
    }
}

The values defined for .parent and .child class names are just samples except the height of the child that should be defined explicitly and its display that should be inline-block.

Conclusion

Keeping your own set of code parts is always useful. and it goes for your mixins too.