Awesome
<img src="https://raw.githubusercontent.com/dreipol/scss-mq/main/logo.png" width="50%"/>scss-mq
Dreipol scss media queries helper
Documentation
Usage
Installation
npm i @dreipol/scss-mq -S
Import
You can import the mq
mixin in your sass files simply using the @use
rule for example:
@use 'node_modules/@dreipol/scss-mq' as *;
a {
@include mq('xs') {
color: red;
}
}
Notice that you can override the internal module variables using the with
rule for example:
@use 'node_modules/@dreipol/scss-mq' as * with (
$breakpoints: (xs: 600px, sm: 767px, md: 991px, lg: 1279px, xl: 1599px)
);
a {
@include mq('xs') {
color: red;
}
}
IMPORTANT You should override the internal scss-mq
variables only once and at beginning of your main.scss
file.`For example
In main.scss
@use 'node_modules/@dreipol/scss-mq' as * with (
$breakpoints: (xs: 600px, sm: 767px, md: 991px, lg: 1279px, xl: 1599px)
);
// Grid
@use 'path/to/grid';
// components
@use 'path/to/a/component-b';
@use 'path/to/a/component-b';
In grid.scss
// you don't need to override again the breakpoints here!
@use 'node_modules/@dreipol/scss-mq' as *;
.grid {
@include mq('xs') {
width: 100%;
}
}