@sass-collective/sass-breakpoint v1.4.0

Sass Breakpoint

Introduction

Generate CSS breakpoint.

Install

npm install @sass-collective/sass-breakpoint --save

Usage

Mixin

breakpoint($min-width, $max-width, $root-selector);

Variables

Update default variables in global

@use "@sass-collective/sass-breakpoint" with (
    $large: 960
);

Module System

@use "@sass-collective/sass-breakpoint";

// Mixin

body {
    // Min width
    @include sass-breakpoint.breakpoint(960) {
        font-size: 10px;
    }

    // Max width
    @include sass-breakpoint.breakpoint($max-width: 960) {
        font-size: 10px;
    }

    // Between
    @include sass-breakpoint.breakpoint(480, 960) {
        font-size: 10px;
    }

    // Parent class or ID
    @include sass-breakpoint.breakpoint(480, $root-selector: '.class') {
        font-size: 10px;
    }
}

Legacy @import

@import "@sass-collective/sass-breakpoint";

// Mixin

body {
    // Min width
    @include sass-breakpoint(960) {
        font-size: 10px;
    }

    // Max width
    @include sass-breakpoint($max-width: 960) {
        font-size: 10px;
    }

    // Between
    @include sass-breakpoint(480, 960) {
        font-size: 10px;
    }

    // Parent class or ID
    @include sass-breakpoint(480, $root-selector: '.class') {
        font-size: 10px;
    }
}

CSS

/* Min width */
@media all and (min-width: 960px) {
    body {
        font-size: 10px;
    }
}

/* Max width */
@media all and (max-width: 959px) {
    body {
        font-size: 10px;
    }
}

/* Between */
@media all and (min-width: 480px) and (max-width: 959px) {
    body {
        font-size: 10px;
    }
}

/* Parent class or ID */
@media all and (min-width: 480px) {
    .class body {
        font-size: 10px;
    }
}