The Ultimate Cheat-Sheet On Mixin – SASS

Using SASS (SCSS) gives you power to use features which are not available in CSS yet. SASS makes the CSS easy and enjoyable. SASS is nothing but a re-usable code which we will have to compile before publishing it to production/ live.

We can declare variables, functions, etc… we can also do nesting. My favourite feature is MIXIN. We can define mixins in the settings file and include it in other .scss files to use the mixins defined in the file.

Here, I have my favourite 6 mixins, I use in each of my project.

1. Breakpoints

For the projects with Bootstrap, I have defined below breakpoints which are inline with the breakpoints of Bootstrap. It becomes very handy at the time of working.

@mixin breakpoint($point) {
    @if $point == ap-xsmall {
        @media only screen and (max-width: 767px) { @content ; }
    }
    @else if $point == ap-small {
        @media only screen and (min-width: 768px) { @content ; }
    }
    @else if $point == ap-medium {
        @media only screen and (min-width: 992px) { @content ; }
    }
    @else if $point == ap-large {
        @media only screen and (min-width: 1200px) { @content ; }
    }
}

Usage

.shipping-info {
    border-top: 1px solid #000;
    
    @include breakpoint(ap-medium) {
        border-top: 0;
    }
}

2. Vendor Prefixes

There are two SCSS mixins, I used in my projects. One is for CSS3 properties like – transform, transitions and second is for animation.

@mixin vendor-prefix($property, $value) {
    @each $prop in '-webkit-', '-moz-', '-ms-', '-o-', '' {
        #{$prop}#{$property}: $value;
    }
}

@mixin keyframes($animation-name) {
    @each $prop in '-webkit-', '-moz-', '-ms-', '-o-', '' {
        #{$prop}keyframes #{$animation-name} {
            @content;
        }
    }
}

Usage

For mixin declared as vendor-prefix, we can use it as below:

@include vendor-prefix(transform, translate(-50%, -50%));

For Animation, we first need to define the animation keyframes using the mixin declared with keyframes.

@include keyframes(bgcolor) {
    from {background-color: red;}
    to {background-color: yellow;}
}

After declaring the keyframes we can use it with our vendor-prefix mixins to animate any element as defined in keyframes mixins.

@include vendor-prefix(animation, bgcolor 5s linear 2s infinite alternate);

3. Anchor Links

As we, as Web Developer know that we need to define anchor elements different states with the theme we’re using, it is really tedious task to define all states of links as we might have different colours for headers, body and footers or may be for related area. With SCSS we can define all of the states of anchor link with one line.

@mixin linx ($link, $hover: $link, $visit: $link, $active: $link, $hover-dec: none) {
    color: $link;
    text-decoration: $hover-dec;
    &:focus,
    &:hover {
        color: $hover;
        text-decoration: $hover-dec;
    }
    &:visited {
        color: $visit;
    }
    &:active {
        color: $active;
    }
}

Usage

a {
    @include linx(blue, navyblue, grey, navyblue, underline);
}

OR

a {
    @include linx(blue);
}

We can define each state’s colour saperated by comma in the mixin and weather we have text-decoration with underline or not. OR we can define only one colour in case we have same style for all the states.

4. Font Size

With mixins we can define font size in rem (root ems) without remembering to declare the font size in px as fallback for IE browsers.

@function calc-rem($size) {
    $rem: $size / 10px;
    @return #{$rem}rem;
}
@mixin font-rem($size) {
    font-size: $size;
    font-size: calc-rem($size);
}

Usage

@include font-rem(16px);

The function will automatically count the rem size from the px and use it with rem and before that it will add the font size in px for fallback.

5. Clearfix

We can avoid using extra class in DOM by including this mixins wherever needed.

@mixin clearfix() {
    &::before,
    &::after {
        clear: both;
        content: '';
        display: table;
    }
}

Usage

.row--custom {
    @include clearfix();
}

6. Visually Hidden Element

We can have a css ready to include on any class to make it visually hidden, but available for screen reader to read.

%visuallyhidden {
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

Usage

.sr-only {
    @extend %visuallyhidden;
}

I use this mixin on every project and it helps me save lots of time. I hope this will also help you to save time and expedite project.

Let me know what do you think of this cheat sheet and if there’s any more useful mixins you have and want me to include in this sheet, please share it in the comment box and I will add it in the list.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

1 comments On The Ultimate Cheat-Sheet On Mixin – SASS

Leave a reply:

Your email address will not be published.