mq-scss

Javascript version of the package with the similar concept is here

Install

$ npm i -D @rm-labo/mq-scss

you can import your scss project root.

// scss
@use 'path/to/node_modules/@rm-labo/mq-scss/_mq.scss' as *; // or @forward 

// legacy 
@import 'path/to/node_modules/@rm-labo/mq-scss/_mq.scss';

If your build tool processes CSS from your JavaScript entry point,
you can also import the stylesheet directly as modules

// js
import '@rm-labo/mq-scss/_mq.scss'

Usage

Three @mixins are available.
You can use your favorite 'camel case' or 'kebab case'.

// camelCase
@include mqUp($bp) {}
@include mqDown($bp) {}
@include mqBetween($bp1, $bp2) {}

// kebab-case (same as camelCase)
@include mq-up($bp) {}
@include mq-down($bp) {}
@include mq-between($bp1, $bp2) {}

arguments	type	required	default value	description
$bp	string\|number	`false`	`md`	`sm`, `md`, `lg`, `xl`, Free px number (ex. 1280px)
$bp1	string\|number	`true`	-	`sm`, `md`, `lg`, `xl`, Free px number (ex. 1280px)
$bp2	string\|number	`true`	-	`sm`, `md`, `lg`, `xl`, Free px number (ex. 1280px)

default setting values

$mq-breakpoints: (
  sm: 600px,
  md: 900px, // default
  lg: 1200px,
  xl: 1800px
) !default;

$mq-breakpoints-default-key: 'md' !default;

override default setting values

You can overwrite $mq-breakpoints-default-key and $mq-breakpoints.
Declare before @import '_mq.scss'.
Specify one of the property names of $mq-breakpoints for $mq-breakpoints-default-key.

// override example 
@use 'path/to/node_modules/@rm-labo/mq-scss/_mq.scss' as * with (
  $mq-breakpoints: (
    micro: 320px,
    small: 620px,
    medium: 840px, // default
    large: 1280px,
    extra: 1900px,
    // .. Add as many as you like ..
  ),
  $mq-breakpoints-default-key: 'medium',
);

// legacy
$mq-breakpoints: (
  micro: 320px,
  small: 620px,
  medium: 840px, // default
  large: 1280px,
  extra: 1900px,
  // .. Add as many as you like ..
);

$mq-breakpoints-default-key: 'medium';

@import 'path/to/node_modules/@rm-labo/mq-scss/_mq.scss';

Examples

Set the argument to $mq-breakpoints property.

#box-mq-up

#box-mq-down

// MOBILE FIRST POLICY
div#box-mq-up {
  background: red; // ~ 599px
  @include mqUp('sm') { background: orange; } // 600px and up
  @include mqUp('md') { background: green; } // 900px and up
  @include mqUp('lg') { background: blue; } // 1200px and up
  @include mqUp('xl') { background: purple; } // 1800px and up
}

// DESKTOP FIRST POLICY
div#box-mq-down {
  background: red; // 1800px ~
  @include mqDown('xl') { background: purple; } // ~ 1799px
  @include mqDown('lg') { background: blue; } // ~ 1199px
  @include mqDown('md') { background: green; } // ~ 899px
  @include mqDown('sm') { background: orange; } // ~ 599px
}

#box-mq-between

// SPECIFY BY RANGE 
div#box-mq-between {
  background: red; // ~ 599px , 900px ~ 1199px , 1800px ~
  @include mqBetween('sm', 'md') { background: green; } // 600px ~ 899px
  @include mqBetween('lg', 'xl') { background: blue; } // 1200px ~ 1799px
}

With no arguments, you can simply write with one breakpoint.
$mq-breakpoints-default-key 's value applies.
The argument of mqBetween() cannot be omitted.

#box-mq-up-df

#box-mq-down-df

// mqUp()
div#box-mq-up-df {
  background: red;
  @include mqUp() { background: green; } // 900px (default: md) and up 
}

// mqDown()
div#box-mq-down-df {
  background: red;
  @include mqDown() { background: green; } // 899px (default: md) and down 
}

It is also possible to directly specify a free px number as an argument.

#box-mq-up-626

#box-mq-down-782

div#box-mq-up-626 {
  background: red; 
  @include mqUp(626px) { background: green; } // 626px and up 
}

div#box-mq-down-782 {
  background: red;
  @include mqDown(782px) { background: green; } // 782px and down 
}

There is no problem if mixed with the key name.
In the case of mqBetween, it doesn't matter even if the size of the argument is reversed.

#box-mq-bw-l-n

#box-mq-bw-n-n

div#box-mq-bw-l-n {
  background: red; // ~ 599px , 1600px  ~
  @include mqBetween('sm', 1600px) { background: green;} // 600px ~ 1599px 
}

div#box-mq-bw-n-n {
  background: red; // ~ 849px , 1234px ~
  @include mqBetween(1234px, 850px) { background: green;} // 850px ~ 1233px 
}

For the height, you can use the following @mixin.

#box-mq-h-up

#box-mq-h-down

div#box-mq-h-up {
  background: red;
  @include mqHeightUp('sm') { background: orange; }
  @include mqHeightUp(900px) { background: green; }
  @include mqHeightUp('lg') { background: blue; }
  @include mqHeightUp('xl') { background: purple; }
}

div#box-mq-h-down {
  background: red;
  @include mqHeightDown('xl') { background: purple; }
  @include mqHeightDown(1200px) { background: blue; }
  @include mqHeightDown('md') { background: green; }
  @include mqHeightDown('sm') { background: orange; }
}

#box-mq-h-bw

div#box-mq-h-bw {
  background: red; // ~ 599px , 900px ~ 1199px , 1800px ~
  @include mqHeightBetween('sm', 'md') { background: green; } // 600px ~ 899px
  @include mqHeightBetween('lg', 'xl') { background: blue; } // 1200px ~ 1799px
}

You can also write in "kebab-case".

// kebab-case (same as camelCase)
.class-name {
  @include mq-height-up('sm') { /* 600px and up */ }
  @include mq-height-up('md') { /* 900px and up */ }
  @include mq-height-up('lg') { /* 1200px and up */ }
  @include mq-height-up('xl') { /* 1800px and up */ }

  @include mq-height-down('xl') { /* 1799px and down */ }
  @include mq-height-down('lg') { /* 1199px and down */ }
  @include mq-height-down('md') { /* 899px and down */ }
  @include mq-height-down('sm') { /* 599px and down */ }

  @include mq-height-between('sm', 'md') { /* 600px ~ 899px */ }
  @include mq-height-between('sm', 'lg') { /* 600px ~ 1199px */ }
  @include mq-height-between('md', 'lg') { /* 900px ~ 1199px */ }
  @include mq-height-between('lg', 'xl') { /* 1200px ~ 1799px */ }
}

It is also possible to specify the "width" if you want to use it together with the "height".

.class-name {
  // camelCase
  @include mqWidthUp() { } // same as mqUp() 
  @include mqWidthDown() { } // same as mqDown()
  @include mqWidthBetween('sm', 'md') { } // same as mqWidthBetween('sm', 'md')

  // kebab-case
  @include mq-width-up() { } // same as mq-up()
  @include mq-width-down() { } // same as mq-down()
  @include mq-width-between('sm', 'md') { } // same as mq-between('sm', 'md')
}

Licence

Licensed under MIT license.
You are free to use for your personal or commercial projects.

Release notes

version	Description
ver 1.0.0	launch