Welcome Guest! (App Version 5.16)

websitnero logo name

Sass Media Query

Media Query in Sass

Media Query is a tool to add responsiveness to a website so that it looks good and user-friendly in reading and visualizing to the end user doesn't matter if he watches the website on desktop, wide-screen, tablet or smart-phone. The fixing and adjustment in UI for the html page is done with the help of a techniquecalled - Media Query.

Sass Media Query is no different than regular CSS Media Query with the only difference being that you may also make use of variables while writing them. Also, you may add Media Query in the end for all respective elements or you may write them inside the elements for required screen.

Look at the example below:

main.scss:

$break-point-1: 992px;
$break-point-2: 768px;
$break-point-3: 576px;

div {
  background: red; color: yellow;

  @media screen and (max-width: $break-point-1){
    background: orange; color: blue;
  }

  @media screen and (max-width: $break-point-2){
    background: yellow; color: gray;
  }

  @media screen and (max-width: $break-point-3){
    background: violet; color: pink;
  }

}					

main.css (compiled):

div {
  background: red;
  color: yellow;
}
@media screen and (max-width: 992px) {
  div {
    background: orange;
    color: blue;
  }
}
@media screen and (max-width: 768px) {
  div {
    background: yellow;
    color: gray;
  }
}
@media screen and (max-width: 576px) {
  div {
    background: violet;
    color: pink;
  }
}
	

Note: Kindly take note that while using Sass you got the flexibility of changing break-points at one single place (variables) and it will reflect all over the CSS. Earlier in CSS if due to some requirement you decided to change the break-points, you manually would have to change it in a million places, independently of each other.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.