6. Defining Media Queries

Jun 10 2018- POSTED BY projecth 0 Comment

There are many benefits to using Sass when building or refactoring responsive layouts. In this video, we’ll cover some the ways we can refactor our project’s media queries.

 

Nested Media Queries

One of the advantages of nesting media queries is that nesting keeps media queries local to the component and the original styles we’re modifying.

_header.scss
.main-header {
  @extend %centered;
  padding-top: 170px;
  height: 850px; 
  background-size: cover; 

  @media #{$brk-small} { 
      display: none; 
  }
}
_variables.scss

Where as $brk-small is a variable holding the value of the phone view width breakpoint.

$brk-small: '(max-width: 768px;)';
$brk-medium: '(max-width: 992px;)';

The value of media query variables is a strings, which is why we used interpolation when calling it (e.g. #{$brk-small} )

@extend currently doesn’t work inside Sass @media queries.
Sass currently does not allow cross-media extensions, because it outputs invalid CSS and extends rules from another scope.

For more details on media queries, check the following link:

[link]