Sass Breakpoint

DEPRECATED: This package has been moved to this location, the current repo is no more maintained.

Introduction

Generate CSS breakpoint.

Install

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

Usage

Mixin

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

Variables

Names	Values	Descriptions
$strict	true	Subtract 1px on max-width value, 960px come 959px
$very-small	320	iPhone in portrait mode
$small	480	iPhone in landscape mode
$medium	768	iPad in portrait mode
$large	960	Desktop
$wide	1200	Wide screen

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