Media Query Mixins using SASS for Bootstrap 4 and understanding responsiveness approaches

CSS frameworks like Bootstrap 4 come with very powerful responsiveness utilities but some people(like me) still prefer using their own media queries to create stylesheets in place of using that framework’s own SASS mixins. To use Bootstrap 4’s SASS mixins, you have to include the whole bootstrap SASS package into your main SASS file. Some people do not prefer using that as it’s much simple to include just one bootstrap.min.css in place of nesting all the SASS files.

Talking about media queries, there are mainly 3 approaches. I don’t know their technical names but I call them as below:

1. Mobile First
2. Desktop First
3. Range Specific

Mobile First

For the Mobile-first approach, the mindset is to design the mobile version of the website first. And then adding different media queries for different device sizes above the mobile screen size. So the media queries we write will be like this.

@media only screen and (min-width : 320px)

@media only screen and (min-width : 480px)

@media only screen and (min-width : 768px)

And further increasing the screen size.

Desktop First

For the Desktop first approach, as you assumed, the mindset is to design the desktop version of the website first. And then adding different media queries for different device sizes below the desktop screen size. So the media queries we write will be like this.

@media only screen and (max-width : 1920px)

@media only screen and (max-width : 1200px)

@media only screen and (max-width : 1024px)

@media only screen and (max-width : 768px)

And further decreasing the screen size.

Range Specific

You can call this a special case media query. So e.g. if you want your website logo size to be changed to 100px only for a specific range of screen sizes. You can write it like this

@media only screen and (min-width : 768px) and (max-width : 1024px) {
	.logo{
		width:100px;
	}
}

So that’s how the different approaches for responsiveness work.

Now, to utilize these approaches using SASS mixins in Your bootstrap based or any other website, I created this simple set of mixins. You can copy it from below and use it.

// Define Sizes
$xs: 0;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

// Mobile First
@mixin mq_up($screen_width) {	
	@media only screen and (min-width : #{$screen_width}) {
		@content;
	}
}

// Desktop First
@mixin mq_down($screen_width) {
	@media only screen and (max-width : #{$screen_width}) {
		@content;
	}
}

// Range Specific
@mixin mq($from, $to) {	
	@media (min-width: #{$from}) and (max-width: #{$to}) {	
		@content;
	}
}

This is pretty self-explanatory. First, the sizes are defined for different screens. The sizes are taken directly from the Bootstrap framework as they are pretty standard. Next, there are 3 mixins for all 3 media query approaches.

So if you want to use mobile-first approach, you can use it like this :

@include mq_up($sm){
... your styles here ...
}

For desktop first :

@include mq_down($xl){
... your styles here ...
}

And for specific screen sizes you can use it like this :

@include mq($sm, $xl){
... your styles here ...
}

I hope you devs find this article useful. Please share it with others and don’t forget to leave your valuable comments.