at-rules

mixins

media-breakpoint-up

Since 0.1.0

@mixin media-breakpoint-up($name, $breakpoints) { ... }

Description

Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	the name for the breakpoint	`String`	— none
`$breakpoints`	a map of grid breakpoints	`Map`	— none

Example

.test {
  @include media-breakpoint-up('md') {
    width: 25%;
  }
}

Used by

[mixin] media-breakpoint-between
[mixin] media-breakpoint-only

Author

Mark Otto

media-breakpoint-down

Since 0.1.0

@mixin media-breakpoint-down($name, $breakpoints) { ... }

Description

Media of at most the maximum breakpoint width. No query for the largest breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	the name for the breakpoint	`String`	— none
`$breakpoints`	a map of grid breakpoints	`Map`	— none

Example

.test {
  @include media-breakpoint-down('md') {
    width: 100%;
  }
}

Author

Mark Otto

media-breakpoint-between

Since 0.1.0

@mixin media-breakpoint-between($lower, $upper, $breakpoints) { ... }

Description

Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$lower`	the name for the lower/min breakpoint	`String`	— none
`$upper`	the name for the upper/max breakpoint	`String`	— none
`$breakpoints`	a map of grid breakpoints	`Map`	— none

Example

.test {
  @include media-breakpoint-between('md', 'xl') {
    width: 50%;
  }
}

Requires

[mixin] media-breakpoint-up
[mixin] media-breakpoint-down

Author

Mark Otto

media-breakpoint-only

Since 0.1.0

@mixin media-breakpoint-only($name, $breakpoints) { ... }

Description

Media between the breakpoint's minimum and maximum widths. No minimum for the smallest breakpoint, and no maximum for the largest one.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	the name for the breakpoint	`String`	— none
`$breakpoints`	a map of grid breakpoints	`Map`	— none

Example

.test {
  @include media-breakpoint-only('md', $breakpoints) {
    width: 50%;
  }
}

Requires

[mixin] media-breakpoint-up
[mixin] media-breakpoint-down

Author

Mark Otto

backgrounds & borders

mixins

background-color

Since 0.1.0

@mixin background-color($parent, $bgcolor, $color, $alt-color: rgb(255, 255, 255)) { ... }

Description

Creates background color variants

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$parent`	a CSS selector; should not include an HTML element	`String`	— none
`$bgcolor`	the background color; will check the contrast with the $color	`Color`	— none
`$color`	the text color	`Color`	— none
`$alt-color`	a fallback color if for if the $color provided fails A11Y check	`Color`	`rgb(255, 255, 255)`

Example

.example {
  @include bg-color-variant('.bg-test', black, white);
}

Requires

[mixin] hover-focus

border-radius

Since 0.1.0

@mixin border-radius($radius) { ... }

Description

Creates border-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	a valid CSS unit to create a border-radius on all sides	`Number`	— none

Example

.example {
  @include border-radius();
}

Author

Mark Otto

border-top-radius

Since 0.1.0

@mixin border-top-radius($radius) { ... }

Description

Creates border-top-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	a valid CSS unit to create a border-radius on the top	`Number`	— none

Example

.example {
  @include border-top-radius(2px);
}

Author

Mark Otto

border-right-radius

Since 0.1.0

@mixin border-right-radius($radius) { ... }

Description

Creates border-right-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	a valid CSS unit to create a border-radius on the right	`Number`	— none

Example

.example {
  @include border-right-radius(2px);
}

Author

Mark Otto

border-bottom-radius

Since 0.1.0

@mixin border-bottom-radius($radius) { ... }

Description

Creates border-bottom-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	a valid CSS unit to create a border-radius on the bottom	`Number`	— none

Example

.example {
  @include border-bottom-radius(2px);
}

Author

Mark Otto

border-left-radius

Since 0.1.0

@mixin border-left-radius($radius) { ... }

Description

Creates border-left-radius

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	a valid CSS unit to create a border-radius on the left	`Number`	— none

Example

.example {
  @include border-left-radius(2px);
}

Author

Mark Otto

border

Since 0.1.0

@mixin border($direction: null, $color: inherit, $style: solid, $width: .0625rem) { ... }

Description

Creates border variants

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	either bottom, left, top, or right; if you don't provide then it defaults to all sides	`String`	`null`
`$color`	a valid CSS color	`Color`	`inherit`
`$style`	a valid border style	`String`	`solid`
`$width`	a valid number	`Number`	`.0625rem`

Example

.example {
  @include border(right, red, solid, 2px);
}

positioning

mixins

center

Since 0.1.0

@mixin center($position: null) { ... }

Description

Centers a element absolutely on any or multiple planes

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	The position or plane to center	`String`	`null`

Example

.example {
  @include center();
}

Author

Mark Otto

pseudo-classes

mixins

hover

Since 0.1.0

@mixin hover() { ... }

Description

Creates hover mixin

Parameters

None.

Example

.test {
  @include hover {
    text-decoration: underline;
  }
}

Author

Mark Otto

hover-focus

Since 0.1.0

@mixin hover-focus() { ... }

Description

Creates hover, focus combo mixin

Parameters

None.

Example

.test {
  @include hover-focus {
    text-decoration: underline;
    outline: 1px solid blue;
  }
}

Used by

[mixin] background-color
[mixin] text-color

Author

Mark Otto

plain-hover-focus

Since 0.1.0

@mixin plain-hover-focus() { ... }

Description

Creates hover, focus and parent combo mixin

Parameters

None.

Example

.test {
  @include plain-hover-focus {
    background-color: blue;
  }
}

Author

Mark Otto

hover-focus-active

Since 0.1.0

@mixin hover-focus-active() { ... }

Description

Creates hover, focus, and active combo mixin

Parameters

None.

Example

.test {
  @include hover-focus-active {
    background-color: blue;
  }
}

Author

Mark Otto

has-nth

Since 0.1.0

@mixin has-nth($expression, $element: '*') { ... }

Description

Creates has-nth

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expression`	a valid CSS expression	`String`	— none
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include has-nth('n + 4', 'li') {
      color: blue;
   }
}

Used by

[mixin] at-least
[mixin] at-most
[mixin] divisible-by
[mixin] has-exactly
[mixin] has-odd
[mixin] has-even

Author

Adam Giese

at-least

Since 0.1.0

@mixin at-least($quantity, $element: '*') { ... }

Description

Creates at-least

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$quantity`	a number of items to narrow	`Number`	— none
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include at-least(4, 'li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

at-most

Since 0.1.0

@mixin at-most($quantity, $element: '*') { ... }

Description

Creates at-most

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$quantity`	a number of items to narrow	`Number`	— none
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include at-most(4, 'li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

divisible-by

Since 0.1.0

@mixin divisible-by($quantity, $offset: 0, $element: '*') { ... }

Description

Creates divisible-by

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$quantity`	a number of items to narrow	`Number`	— none
`$offset`	a number to add on to narrow	`Number`	`0`
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include divisible-by(4, 0, 'li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

has-exactly

Since 0.1.0

@mixin has-exactly($quantity, $element: '*') { ... }

Description

Creates has-exactly

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$quantity`	a number of items to narrow	`Number`	— none
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include has-exactly(4, 'li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

has-odd

Since 0.1.0

@mixin has-odd($element: '*') { ... }

Description

Creates has-odd

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include has-odd('li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

has-even

Since 0.1.0

@mixin has-even($element: '*') { ... }

Description

Creates has-even

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$element`	a valid CSS selector	`String`	`'*'`

Example

li {
   @include has-even('li') {
      color: blue;
   }
}

Requires

[mixin] has-nth

Author

Adam Giese

text

mixins

text-color

Since 0.1.0

@mixin text-color($parent, $color) { ... }

Description

Creates text color variants

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$parent`	a CSS selector; should not include an HTML element	`String`	— none
`$color`	the text color	`Color`	— none

Example

.example {
  @include text-color('.text-test', black, white);
}

Requires

[mixin] hover-focus