Sass Mixins for Media Queries

Sass is described as a ‘preprocessor scripting language.’ Essentially, it gives you additional functionality when writing CSS code.

One feature added is called a mixin. You can think of mixins like a function in a sense that it is a reusable piece of code — the difference being that does not return anything.

Here’s a simple example: in your project you’ll be decorating a lot of text in a similar fashion

In execution, if you have a selector in which you know you need to style text as such:

Also similar to functions, you can designate a parameter-like component for which you have to pass in a value when using it.

Here, it is required you pass in the color to be used for the font.

As you can see, mixins are an extremely powerful tool. One area where they come in handy often is media queries. Media queries are used to make CSS compatible for multiple screen sizes or ‘breakpoints.’

Here’s a basic example:

@media only screen and (max-width: 600px) { 
  body {
    background-color: blue;
  }
}

This query states that when the body is viewed on a screen (not printed) smaller than 600px wide, the background color should be blue.

It should also be noted that a lot of media queries use relative units (like em) v. pixels. This way, if a user changes the default font size on their browser, the website will adjust accordingly. 1em = 16px

Using a mixin, you can specify each device you want a breakpoint for using a naming convention, conditionals and knowledge of screen-sizes (which you can find here).

So if you call the mixin while passing in phone, you will see changes occur on mobile devices.

This mixin states that on the default screen, the background will be orangered. On a phone, you should see purple. You can test this in the device toolbar of your browser inspector.

After messing around with the settings, you can see this was a success!