[Sass] LEVEL 7: RESPONSIVE -- Ex

NESTED MEDIA QUERIES

Our stylesheet contains a responsive breakpoint with some alterations to .factory. Let's clean up the media query a bit by nesting it inside .factory.

.factory {
  width: 100%;
}
@media (min-width: 960px) {
  .factory {
    width: percentage(600px / 960px);
  }
}

Answer:

.factory {
  width: 100%;
  @media (min-width: 960px) {
    width: percentage(600px / 960px);
    }
}

 

RESPOND-TO I

Media query handling has now been moved to a respond-to mixin, which has a fixed breakpoint for when desktop is passed as an argument. Use @else if to add a second condition that checks for an argument of tablet. tablet should output a media query with a min-width of 768pxcontaining the @content block.

@mixin respond-to($media) {
  @if $media == desktop {
    @media (min-width: 960px) {
      @content;
    }
  }
}

.factory {
  width: 100%;
  @include respond-to(desktop) {
    width: percentage(600px / 960px);
  }
  @include respond-to(tablet) {
    width: 50%;
  }
}

Answer:

@mixin respond-to($media) {
  @if $media == desktop {
    @media (min-width: 960px) {
      @content;
    }
  }@else if $media == tablet{
      @media (min-width: 768px){
        @content;
    }
  }
}

.factory {
  width: 100%;
  @include respond-to(desktop) {
    width: percentage(600px / 960px);
  }
  @include respond-to(tablet) {
    width: 50%;
  }
}

 

RESPOND-TO II

Let's make our respond-to more flexible by allowing it to accept query values rather than fixed breakpoints. Rewrite the mixin to output a media query with a min-width of the $queryargument, which contains the @content block.

@mixin respond-to($query) {

}

.factory {
  width: 100%;
  @include respond-to(960px) {
    width: percentage(600px / 960px);
  }
  @include respond-to(768px) {
    width: 50%;
  }
}

Answer:

@mixin respond-to($query) {
    @media (min-width: $query){
      @content;
  }
}

.factory {
  width: 100%;
  @include respond-to(960px) {
    width: percentage(600px / 960px);
  }
  @include respond-to(768px) {
    width: 50%;
  }
}

 

RESPOND-TO III

We should further expand our mixin to allow for queries beyond min-width. Add $type as the first argument to respond-to, which will be used in place of min-width when passed in.

@mixin respond-to($query) {
  @media (min-width: $query) {
    @content;
  }
}

.factory {
  width: 100%;
  @include respond-to(min-width, 960px) {
    width: percentage(600px / 960px);
  }
  @include respond-to(max-width, 768px) {
    width: 50%;
  }
}

Answer:

@mixin respond-to($type, $query) {
  @media ($type: $query) {
    @content;
  }
}

.factory {
  width: 100%;
  @include respond-to(min-width, 960px) {
    width: percentage(600px / 960px);
  }
  @include respond-to(max-width, 768px) {
    width: 50%;
  }
}

 

RESPOND-TO IV

We've noticed that our most common call to respond-to passes in min-width for $type and960px for $query: create default values out of each so that our simplified @include works correctly.

@mixin respond-to($type, $query) {
  @media ($type: $query) {
    @content;
  }
}

.factory {
  width: 100%;
  @include respond-to {
    width: percentage(600px / 960px);
  }
  @include respond-to(max-width, 768px) {
    width: 50%;
  }
}

Answer:

@mixin respond-to($type: min-width, $query: 960px) {
  @media ($type: $query) {
    @content;
  }
}

.factory {
  width: 100%;
  @include respond-to {
    width: percentage(600px / 960px);
  }
  @include respond-to(max-width, 768px) {
    width: 50%;
  }
}