Media queries

media-queries-css-rules.scss

$columns-phone: 4;
$columns-tablet: 8;
$columns-desktop: 12;
$columns-default: 4;

$gutter-phone: 16px;
$gutter-tablet: 16px;
$gutter-desktop: 16px;

$margin-phone: 16px;
$margin-tablet: 16px;
$margin-desktop: 16px;

$breakpoint-tablet: 480px;
$breakpoint-desktop: 840px;

$range-phone: "(max-width: #{$breakpoint-tablet - 1px})";
$range-tablet: "(min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px})";
$range-tablet-up: "(min-width: #{$breakpoint-tablet})";
$range-desktop: "(min-width: #{$breakpoint-desktop})";

// Think in mobile first.
// The class block should style the small breakpoint first
.device-class {
  // styles and properties
}

// Medium screens
@media #{$range-tablet} {
  .device-class {
    // style for tablet range
    // ...
  }
}

@media #{$range-tablet-up} {
  .device-class {
    // style for desktop range and up. optional
    // ...
  }
}

@media #{$range-desktop} {
  .device-class {
    // style for desktop range
    // ...
  }
}



// ==========================================
// Doing this on a scss or sass format
.device-class {
  @media #{$range-desktop} {
    // ...
  }
  
  @media #{$range-tablet} {
    // ...
  }
}

// -> this will limit you to style on "device-class" scope
// and it will render multiple media(just see the css rendered on your devtools. I'm lazy )

// Conclusion.
// - Put your media block below on each file.
// - Do not add media block in a class 
// - DO PUT the class in a media block