Breaking News: Grepper is joining You.com. Read the official announcement!

responsive mixins sass

Misty Mink answered on September 17, 2022 Popularity 9/10 Helpfulness 4/10

answer responsive mixins sass

responsive mixins sass

Comment

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    } //600px
  }

  @if $breakpoint == phone-mid {
    @media only screen and (max-width: 43.75em) {
      @content;
    } //700px
  }

  @if $breakpoint == tab-port {
    @media only screen and (max-width: 50em) {
      @content;
    } //800px
  }

  @if $breakpoint == laptop-mid-size {
    @media only screen and (max-width: 67.5em) {
      @content;
    } //1080px
  }

  @if $breakpoint == tab-land {
    @media only screen and (max-width: 75em) {
      @content;
    } //1200px
  }

  @if $breakpoint == big-desktop-assoc {
    @media only screen and (max-width: 109.5em) {
      @content;
    } //1440px
  }

  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 110em) {
      @content;
    } //1800px
  }
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css mixins responsive sass

Link to this answer
Share Copy Link

Contributed on Sep 17 2022

Misty Mink

0 Answers Avg Quality 2/10

responsive mixins sass

Contents

More Related Answers

responsive mixins sass

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.