JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 56
  • Score
    100M100P100Q66936F
  • License MIT

Simple SCSS-mixins to generate media queries

Package Exports

  • simple-media-queries

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-media-queries) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple media queries npm

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