Awesome
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;
}
}
Install
- Npm -
npm install include-media-spread
- Yarn -
yarn add include-media-spread
- Manually - download
dist/_spread.scss
and include in your sass project
Author
Credit to Doug Avery who a lot of code was borrowed from.