SASS example - Media queries with mixins and variables

SASS is a popular pre-processor-style language. It provides a variety of features to support the DRY principle. It supports two syntaxes SASS and SCSS. In these tutorials, Learn how to write media queries in SASS and SCSS.

This blog solves the below things.

• How to write media queries in SASS and SCSS syntax
• adding media queries in sass mixins.
• variables

#SASS media queries usage

The Media query feature is introduced in CSS to apply styles based on screen sizes or media device types. The @media query is used to declare the different devices breakpoints in the CSS

Media queries support the latest CSS language. Every CSS line of code is valid in SASS.

Following are the selectors for applying different screen sizes media queries executed in the browser at run time, whereas SASS rules execute at compile time to generate CSS styles

#Change background-color for different media types

A simple example uses a media query for setting the background color for various screen sizes.

body {
  background-color: red;
}

@media screen and (min-width: 600px) {
  body {
    background-color: blue;
  }
}
@media (min-width: 1000px) {
  body {
    background-color: black;
  }
}

#sass variable in media queries using mixins

SASS code works at compile-time, while browsers and CSS codes work with media queries at runtime.

So it is difficult to set variable-width dynamically, Instead, we can use a mixin that accepts width from the media queries content directives allowing us to place the content later instead of predefined.

@mixin changewidth($originwidth) {
  @contents {
    width: $originwidth;
  }
}
@media screen and (max-width: 600px) {
  @include changewidth($originwidth: 400px);
}
@media screen and (max-width: 1100px) {
  @include changewidth($originwidth: 970px);
}
@media screen and (min-width: 1300px) {
  @include changewidth($originwidth: 1180px);
}

SCSS syntax code

@mixin changewidth($originwidth) @Contents {
  width: $originwidth;
}
@media screen and (max-width
 &: 600px) @include changewidth($originwidth: 400px) @media screen and (max-width
 &: 1100px) @include changewidth($originwidth: 970px) (min-width
 &: 1300px) @include changewidth($originwidth: 1180px);

#Create mixin with media queries in SASS and SCSS

Another example of passing variable values for different screens using media queries and mixin with default arguments.

• defined mixin with default margin value and set the value
• set margin value using include directive in div tag for default screens
• change default margin for max width=900px using media queries and include directive tag

Here is an scss code example for media queries in mixin

@mixin changeMargin($margin: 5px) {
  margin: $margin;
}
div {
  @include changeMargin;
}

@media screen and (max-width: 900px) {
  div {
    @include changeMargin(10px);
  }
}

Here is sass code syntax for the above code

@mixin
  changeMargin($margin
    &:
      5px)
        margin: $margin
div
@media
  screen
    and
      (max-width
        &:
          900px)

And generated CSS code is

div {
  margin: 5px;
}

@media screen and (max-width: 900px) {
  div {
    margin: 10px;
  }
}

#Media query SASS breakpoints best practices and guidelines

• You can identify and define various breakpoints sizes in a single place as seen below

mobile screen sizes are from 300px to 500px Tablets sizes from 500px to 800px laptops and desktops are from 800px to 1048px Large TV and desktops are from 1048px to 1200px

you can consider the above breakpoints with your custom resolutions and define those as breakpoint variables and use this in mixin in a single place

• Find the breakpoint that you want to target with min or max and write a single media query in a mixin.

suppose you are target mobile devices with a 300px screen width

.navigation {
  display: block;

  @media screen and (min-width: 300) {
    display: none;
  }
}

#Conclusion

You learned media queries syntax in sass and scss with variables breakpoints and mixin examples and best practices and guidelines