Mobile first using BEM notation and SASS

Community feedback

• 

  Abe•770

  @abe-m1Posted almost 4 years ago

  Hi Anne-Sophie, Your solution looks great. For handling media queries, I use the following Mixin below. It lets me pass in a parameter corresponding to the screen size I am targeting, and there are $if statements to determine which media query to apply.

  @mixin respond($breakpoint) {
    @if $breakpoint == big-desktop {
      @media (min-width: 1800px) {
        @content;
      }
    }
    @if $breakpoint == desktop {
      @media (min-width: 1400px) {
        @content;
      }
    }
    @if $breakpoint == tab-land {
      @media (min-width: 1200px) {
        @content;
      }
    }
    @if $breakpoint == tab-port {
      @media (min-width: 900px) {
        @content;
      }
    }
    @if $breakpoint == phone {
      @media (min-width: 600px) {
        @content;
      }
    }
  } 
  

  and to use it:

  .class {
      @include respond(tab-port) {
          height: 1.5rem;
      }
  } 
  

  3

  ---

  

  Anne-Sophie•245

  @annesophie22Posted almost 4 years ago

  @abe-m1 Thank you very much for your feedback ! I knew I could improve the "management" of my media queries but didn't know how to do it, so what you just gave me will help me a lot. Many thanks

  1