next-scss

Lightweight scss functions and mixins

Installation

npm install @nextindex/next-scss

Import

@import "~@nextindex/next-scss/next-scss";

Functions

rem

padding: rem(15);

em

padding: em(15);

strip-units

line-height: strip-units(1px);

shade

background: shade(#eee, 10%);

tint

background: tint(#eee, 10%);

new-breakpoint

/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
///
/// @param {List} $query
///   A list of media query features and values. Each `$feature` should have a corresponding `$value`.
///
///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
///
///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
///
/// @param {Number (unitless)} $total-columns [$grid-columns]
///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
///

@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns);

Mixins

bem

.block {
    @include has(element) { ... }
    @include variant(light) { ... }
    @include is(active) { ... }
}

media

default variables and sizes:

$xs-screen: 480px!default;
$sm-screen: 768px!default;
$md-screen: 968px!default;
$lg-screen: 1206px!default;
$xl-screen: 1380px!default;

$xs-down: new-breakpoint(max-width $xs-screen 2);
$xs-up: new-breakpoint(min-width $xs-screen 2);

$sm-down: new-breakpoint(max-width $sm-screen 2);
$sm-up: new-breakpoint(min-width $sm-screen 2);

$md-up: new-breakpoint(min-width $md-screen 4);
$md-down: new-breakpoint(max-width $md-screen 4);

$lg-down: new-breakpoint(max-width $lg-screen 8);
$lg-up: new-breakpoint(min-width $lg-screen 8);

$xl-up: new-breakpoint(min-width $xl-screen 4);
$xl-down: new-breakpoint(max-width $xl-screen 4);

Example usage:

.my-class {
    @include media($sm-up) {
        ....
    }
}

utility-edit

@include utility-edit();

object-fit

@include object-fit($fit: fill, $position: null);