simple-media-queries

Simple SCSS-mixins to generate media queries

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
simple-media-queries
1.1.15 years ago5 years agoMinified + gzip package size for simple-media-queries in KB

Readme

Simple media queries !npmnpm-imagenpm-url
This repository contains SCSS-mixins which allow you to easily use media queries in SCSS. With this approach, you don't override previous defined code, but only target the desired screenrange.

The mixins

.selector {
  // Include general theming here
  
  @include down(600) {
    // Theming for small screens here
  }

  @include between(600, 1200) {
    // Theming for screens between 600px and 1200px here 
  }

  @include up(1200) {
    // Theming for big screens here
  }

  @include outside(600, 1200) {
    // Theming for screens below 600px and above 1200px 
  }
}

Codepen-demo