include-media - Spread plugin

An include-media plugin for spreading css properties over breakpoints

Requirements

Dart Sass >= 1.23.0
include-media

Introduction

This plugin calculates the difference between property values and distributes them through your include-media breakpoints.

Example

@use 'include-media' as *;
@use 'include-media-spread' as *;

$breakpoints: (small: 480px, medium: 768px, large: 1024px);

.heading-1 {
  @include spread(font-size, 1rem, 3rem);
}

Generates

/* Mobile first*/
.heading-1 {
  font-size: 1rem;
}
@media (min-width: 480px) {
  .heading-1 {
    font-size: 1.67rem;
  }
}
@media (min-width: 768px) {
  .heading-1 {
    font-size: 2.33rem;
  }
}
@media (min-width: 1024px) {
  .heading-1 {
    font-size: 3rem;
  }
}

Easing

Spread also allows you to pass a ease argument to accelerate or decelerate through the difference in values

// ease options - linear (default), in-quad, out-quad, in-cubic, out-cubic, in-quart, out-quart, in-quint, out-quint

.heading-1 {
  // value increases on a curve, accelerating
  @include spread(font-size, 1rem, 3rem, 'in-quad');
}

Multi-value

Allows you to pass top/right/bottom/left values and spread will calculate the difference between the single and multi values.

Example

.module-block {
  @include spread(padding, 15px, 20px 30px 10px);
}

Generates

.module-block {
  padding: 15px;
}
@media (min-width: 480px) {
  .module-block {
    padding: 16.67px 20px 13.33px 20px;
  }
}
@media (min-width: 768px) {
  .module-block {
    padding: 18.33px 25px 11.67px 25px;
  }
}
@media (min-width: 1024px) {
  .module-block {
    padding: 20px 30px 10px 30px;
  }
}

Custom breakpoints

You can either override globally the breakpoints Include Media Spread will use by default by setting $ims-breakpoints. By default it uses the default include-media breakpoints.

Example

$my-breakpoints: (small: 340px, large: 1000px);
$ims-breakpoints: $my-breakpoints;

@use 'include-media-spread' as *;

Or you to pass custom-breakpoint per mixin.

Example

$custom-breakpoints: (small: 15em, large: 40em);

.module-block {
  @include spread(padding, 10px, 30px, $breakpoints: $custom-breakpoints);
}

Generates

.module-block {
  padding: 10px;
}
@media (min-width: 15em) {
  .module-block {
    padding: 20px;
  }
}
@media (min-width: 40em) {
  .module-block {
    padding: 30px;
  }
}