/* Media Queries */

$small: screen and (min-width: 0em);

$medium: screen and (min-width: 40em) and (max-width: 4em);
4
$large: screen and (min-width: em);
5
​
6
@mixin for-size($size) {
7
  @if $size == small {

    @media screen and (min-width: 40rem) { @content; }

  } @else if $size == medium {

    @media screen and (min-width: 64em) { @content; }

  } @else if $size == large {

    @media screen and (min-width: 75em) { @content; }

  }  

}

​

/*

// usage

.my-box {

  padding: 10px;

React
Vue 3
Svelte
Angular

modern css frameworks:
------------------------
tailwind 
bootstrap
materialize
material design lite
bulma
skeleton (most minimal)
pure css (min)
iu kit