Beginning css preprocessors

Listing 3-8.  Nesting of Media Queries

@media screen {

  #container {

    @media (min-width:500px) {

      width: 500px;

    }

    @media (min-width:700px) {

      width: 700px;

    }

  }

}

Listing 3-9.  Ouput of Listing 

3-8

@media screen and (min-width: 500px) {

  #container {

    width: 500px;

  }

}

 

@media screen and (min-width: 700px) {

  #container {

    width: 700px;

  }

}

Going further, you can create a partial with media queries inside them and then include them 

wherever needed.

With Sass, you can also include media queries inline. Consider an example where you want a container 

to have different width on different viewport sizes. This can be achieved as demonstrated in Listing 

3-10

.

Listing 3-10.  Inline Media Queries

$color1:#CCC;

.color {

   color: $color1;

   @include setQuery(sm) {

      width: 80%;

   }

   @include setQuery(md) {

      width: 70%;

   }

   @include setQuery(lg) {

      width: 60%;

   }

}

---

Chapter 3 

■

 advanCed SaSS

39

Yet another advantage of writing media queries using Sass is that you can assign breakpoints for media 

queries to variables. Then these variables can be used in media queries. This is demonstrated in Listing 

3-11

, 

which is a more elaborate version of the previous example.