scss-mq

Dreipol scss media queries helper

Documentation

• API
• Demo

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%;
    }
}