Beginning css preprocessors

Listing 3-6.  @media Inside Sass

#container{

        Width:960px;

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

                Width:100%;}

}

Listing 3-7.  Output of Listing 

3-6

#container {

  Width: 960px;

}

 

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

  #container {

    Width: 100%;

  }

}

www.allitebooks.com

---

Chapter 3 

■

 advanCed SaSS

38

Now you might be wondering why we would use a preprocessor for writing a media query instead of 

using the conventional CSS method. One of the advantages is code readability. By using the Sass way of 

integrating the media query, the code is very easy to understand.

Sass also allows nesting of media queries for building complex media queries. Consider the example in 

Listing 

3-8

, where we have nested media queries for different width inside the #container. This makes the 

code easy to understand and far more readable.