Range Mixins

Range mixins let you set a property across multiple breakpoints in a single call. Neat! The $base value applies at all sizes; named keyword arguments map breakpoint names to values at that width and above.

scss

/* Instead of this: */
.hero {
  @include crayon.p(4);
  @include crayon.screen("md") { @include crayon.p(8); }
  @include crayon.screen("lg") { @include crayon.p(12); }
}

/* Write this: */
.hero {
  @include crayon.p-range(4, $md: 8, $lg: 12);
}

sass

/* Instead of this: */
.hero
  +crayon.p(4)
  +crayon.screen("md")
    +crayon.p(8)
  +crayon.screen("lg")
    +crayon.p(12)

/* Write this: */
.hero
  +crayon.p-range(4, $md: 8, $lg: 12)

Any breakpoint name from $breakpoints in config works as a keyword $sm, $md, $lg, $xl, $xxl by default.

Example

scss

/* Heading that grows at breakpoints */
.page-title {
  @include crayon.text-size-range("xl", $md: "2xl", $lg: "4xl");
}

/* Card grid: 1 col, 2 at md, 3 at xl */
.card-grid {
  @include crayon.grid;
  @include crayon.grid-cols-range(1, $md: 2, $xl: 3);
  @include crayon.gap-range(4, $md: 6);
}

sass

/* Heading that grows at breakpoints */
.page-title
  +crayon.text-size-range("xl", $md: "2xl", $lg: "4xl")

/* Card grid: 1 col, 2 at md, 3 at xl */
.card-grid
  +crayon.grid
  +crayon.grid-cols-range(1, $md: 2, $xl: 3)
  +crayon.gap-range(4, $md: 6)

Reference

Spacing

Padding

Mixin	Purpose
p-range($base, $breakpoint-range...)	Responsive padding
pt-range($base, $breakpoint-range...)	Responsive top padding
pb-range($base, $breakpoint-range...)	Responsive bottom padding
pl-range($base, $breakpoint-range...)	Responsive left padding
pr-range($base, $breakpoint-range...)	Responsive right padding
px-range($base, $breakpoint-range...)	Responsive horizontal padding
py-range($base, $breakpoint-range...)	Responsive vertical padding

Margin

Mixin	Purpose
m-range($base, $breakpoint-range...)	Responsive margin
mt-range($base, $breakpoint-range...)	Responsive top margin
mb-range($base, $breakpoint-range...)	Responsive bottom margin
ml-range($base, $breakpoint-range...)	Responsive left margin
mr-range($base, $breakpoint-range...)	Responsive right margin
mx-range($base, $breakpoint-range...)	Responsive horizontal margin
my-range($base, $breakpoint-range...)	Responsive vertical margin

Gap

Mixin	Purpose
gap-range($base, $breakpoint-range...)	Responsive row and column gap
gap-x-range($base, $breakpoint-range...)	Responsive column gap
gap-y-range($base, $breakpoint-range...)	Responsive row gap

Sizing

Width

Mixin	Purpose
w-range($base, $breakpoint-range...)	Responsive width

Height

Mixin	Purpose
h-range($base, $breakpoint-range...)	Responsive height

Size

Mixin	Purpose
size-range($base, $breakpoint-range...)	Responsive width and height

Layout

Mixin	Purpose
grid-cols-range($base, $breakpoints...)	Responsive grid columns
grid-rows-range($base, $breakpoints...)	Responsive grid rows

Typography

Mixin	Purpose
text-size-range($base, $responsive...)	Responsive font size and line height
text-weight-range($base, $responsive...)	Responsive font weight
text-leading-range($base, $responsive...)	Responsive line height
text-tracking-range($base, $responsive...)	Responsive letter spacing

Borders

Mixin	Purpose
rounded-range($base, $breakpoint-range...)	Responsive border radius
rounded-t-range($base, $breakpoint-range...)	Responsive top corner radii
rounded-b-range($base, $breakpoint-range...)	Responsive bottom corner radii
rounded-l-range($base, $breakpoint-range...)	Responsive left corner radii
rounded-r-range($base, $breakpoint-range...)	Responsive right corner radii