Flexible SASS @mixin for each viewport (Breakpoint)

In my previous post, I have mentioned few useful tips on @mixin for SASS. In this post I have improvise SASS @mixin for the Breakpoint. I have updated the @mixin for the breakpoint to include any last minute changes to target any width/viewport just by entering the pixel width at the time of @include.

In one of my recent project I was working on last minute changes to fix issue on odd viewport. Breakpoint @mixin from previous post was not flexible enough. So I tried updated it as below:

SASS @mixin

// 1st argument = breakpoint value
// 2nd argument (optional) = either 2nd breakpoint value or the word max to make it a max-width query

@mixin respond-to($val, $val2: none) {
    @if ($val2 == none) {
    	@media (min-width: $val) { @content; }
    } @else if ($val2 == max) {
    	@media (max-width: $val) { @content; }
    } @else {
    	@media (min-width: $val) and (max-width: $val2) { @content; }
    }
}

Above @mixin uses two parameters $val & $val2.

  • $val – 1st breakpoint value
  • $val2 – this is an optional value…
    • if we do not pass, it will take only 1st parameter and create a @media query to target min-width using the value in 1st parameter.
    • If we pass $val2 as “max“, it will create a @media query to target max-width using the value in 1st parameter.
    • If we pass $val2 as pixel values (eg. 768px), it will create a @media query to target the min-width using value from 1st parameter & max-width using value from 2nd parameter.

Breakpoint variables

// Breakpoint Variables to use with @mixin
$mobile = 640px;
$tablet = 768px;
$desktopSmall = 980px;
$desktopLarge = 1200px;

As above code sample we can declare generic viewport as variables to use in our @mixin, but as this @mixin is very flexible and can accommodate any viewport, we can use any pixel width (no need to declare in variables) at any point in the project and doesn’t need to update in the @mixin.

Use with @include

1st Condition from @mixin

.className {
    @include respond-to($desktopSmall) {
        background-color: #f00;
    }
}

Above SCSS will apply the #f00 colour to the screen size above $desktopSmall: 980px, which will render in CSS as below:

@media (min-width: 980px) {
    .className {
        background-color: #f00;
    }
}

2nd Condition form @mixin

.className {
    @include respond-to($mobile, max) {
        background-color: #ff0;
    }
}

Above SCSS will apply #ff0 colour to the max screen size till $mobile: 768px, which will render in CSS as:

@media (max-width: 640px) {
    .className {
        background-color: #ff0;
    }
}

3rd Condition from @mixin

.className {
    @include respond-to($mobile, $tablet) {
        background-color: #f0f;
    }
}

Above SCSS will apply #f0f colour to the min screen size($mobile: 640px) till max screen size($tablet: 768px), which will render in CSS as:

@media (min-width: 768px) and (max-width: 768px) {
    .className {
        background-color: #f0f;
    }
}

Useful Link

Learn more about the breakpoint

 

That’s it!!!

I hope, this new @mixin for breakpoint will help you little more. As always, do let me know your view in comment box below.

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

Leave a reply:

Your email address will not be published.