Contact







07/11/2016

SCSS Solutions

Using SCSS mixins to simplify media queries and cross-browser functionality


Developing for different devices is an absolute necessity today and as a result, the CSS you need to write can be extensive. You need to consider the size and style of everything for mobiles, tablets, laptops and desktops and everything in between, which means writing media queries over and over again. On top of that, you need to consider that different browsers sometimes require properties to be specified with vendor prefixes. An example of both of these requirements is as follows:



.myDiv{
   display: block;

   @media only screen
   and(min-width: 768px)
   and(max-width: 1024px){
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
  }
}


This is a div that by default is set to display as a block (we don't actually need to specify this, but for the example I have), but when the screen is between 768px and 1024px, it will display as a flex box.

In JavaScript or any other programming language, we could create a couple of functions to write something like this out once and then just call those functions when we needed them. CSS doesn’t support functions however, which is where SASS comes in. SASS is a CSS pre-processor with syntax advancements. It allows you to use things like variables and supports functions and a similar feature called mixins, and then processes them to create a CSS file.

It’s worth noting at this point that SCSS is a version of SASS that uses a syntax that is closer to CSS and that is what we will be using from here on out. I won’t go into how files and folder structure are handled with SCSS or where to store the mixins, as that will vary based on personal preference. For more info, please see the full documentation here.



Media Query Mixin



Let’s handle the media queries first. The above media query can be written like this in SCSS:



@mixin ipad {
  @media only screen
  and(min-width: 768px)
  and(max-width: 1024px){
    @content;
  }
}


We specify it is a mixin with '@mixin' then we give it a name. I've called it ipad. We then put our normal CSS media query between a pair of curly braces. Inside the media query braces we use '@content' which will be explained below.

To use the mixin, we include it inside an element selector like so:



.myDiv {
  @include ipad{
    background-color: blue;
    width: 300px;
  }
}


This will apply the media query that we specified in the mixin above and insert any CSS we write within the curly braces in place of the '@content'. When the SCSS file is processed into a CSS file, the above will look like this:



.myDiv {
  @media only screen
  and(min-width: 768px)
  and(max-width: 1024px){
    background-color: blue;
    width: 300px;
  }

}


It's worth noting you can also use this the other way around and include several different selectors inside the mixin by doing the following:



@include ipad {
  .myDiv{
    background-color: blue;
    width: 300px;
  }

  .myOtherDiv {
    background-color: red;
    height: 200px;
  }
}


This is processed into the following CSS:



@media only screen
and(min-width: 768px)
and(max-width: 1024px){
  .myDiv {
    background-color: blue;
    width: 300px;
  }

  .myOtherDiv {
    background-color: red;
    height: 200px;
  }
}


While this is good to know, I much prefer including media queries inside selectors rather than the other way around, but this is personal preference.


Vendor Prefix Mixin



Right, let's move onto vendor prefixes. This one will actually be simpler than the media queries. We nee to create the mixin and inside the curly braces, write the CSS that we want to be applied when the mixin is called:



@mixin flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}


Because we don't have an @content component this time, when we include it, we don't have to use any curly braces:



.myDiv{
  @include flexbox;
}


This is processed to:



.myDiv{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex
}


Mixin Arguments



This is already an incredibly helpful tool, but becomes even more useful when you introduce arguments. Arguments allow you to specify things within the mixin when you include it. Here is an example:



@mixin flex-direction($value) {
  -ms-flex-direction: $value;
  -webkit-flex-direction: $value;
  -webkit-flex-direction: $value;
  flex-direction: $value;
}


and when included:



.myDiv{
  @include flexbox;
  @include flex-direction('column');
}


which processes to:



.myDiv{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}


There's a lot more you can do with mixins and indeed SASS/SCSS as a whole, but one thing is for certain, it makes a developers life a lot easier and over the many hours that go into a project, it saves an awful lot of time. It only takes a couple of hours to pick up so if you're not already using it, you should be.

If you liked this post, please share it below.