animation

mixins

animation

@mixin animation($vals...) { ... }
View source

Description

Generates the property animation as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$vals...

The value(s) of the animation property.

—

Author

animation-delay

@mixin animation-delay($val) { ... }
View source

Description

Generates the property animation-delay as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-delay property.

—

Author

animation-direction

@mixin animation-direction($val) { ... }
View source

Description

Generates the property animation-direction as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-direction property.

—

Author

animation-duration

@mixin animation-duration($val) { ... }
View source

Description

Generates the property animation-duration as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-duration property.

—

Author

animation-fill-mode

@mixin animation-fill-mode($val) { ... }
View source

Description

Generates the property animation-fill-mode as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-fill-mode property.

—

Author

animation-iteration-count

@mixin animation-iteration-count($val) { ... }
View source

Description

Generates the property animation-iteration-count as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-iteration-count property.

—

Author

animation-name

@mixin animation-name($val) { ... }
View source

Description

Generates the property animation-name as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-name property.

—

Author

animation-play-state

@mixin animation-play-state($val) { ... }
View source

Description

Generates the property animation-play-state as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-play-state property.

—

Author

animation-timing-function

@mixin animation-timing-function($val) { ... }
View source

Description

Generates the property animation-timing-function as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the animation-timing-function property.

—

Author

keyframes

@mixin keyframes($name) { ... }
View source

Description

Generates a @keyframes rule as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$name

The name of the keyframe.

String—

Content

This mixin allows extra content to be passed (through the @content directive). Role: The selectors and properties to be inserted in the `@keyframes` rule.

Author

borders

mixins

border-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Author

border-bottom-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the bottom corners of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Requires

Used by

Author

border-radius-bottom

@mixin border-radius-bottom() { ... }
View source

Parameters

None.

Requires

See

Author

border-bottom-left-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the bottom-left corner of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Used by

Author

border-radius-bottom-left

@mixin border-radius-bottom-left() { ... }
View source

Parameters

None.

Requires

See

Author

border-bottom-right-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the bottom-right corner of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Used by

Author

border-radius-bottom-right

@mixin border-radius-bottom-right() { ... }
View source

Parameters

None.

Requires

See

Author

border-left-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the left side corners of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Requires

Used by

Author

border-radius-left

@mixin border-radius-left() { ... }
View source

Parameters

None.

Requires

See

Author

border-right-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the right side corners of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Requires

Used by

Author

border-radius-right

@mixin border-radius-right() { ... }
View source

Parameters

None.

Requires

See

Author

border-top-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the top corners of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Requires

Used by

Author

border-radius-top

@mixin border-radius-top() { ... }
View source

Parameters

None.

Requires

See

Author

border-top-left-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the top-left corner of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Used by

Author

border-radius-top-left

@mixin border-radius-top-left() { ... }
View source

Parameters

None.

Requires

See

Author

border-top-right-radius

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

Description

Generates the property border-radius as well as each necessary vendor prefix for only the top-right corner of an element.

Parameters

NameDescriptionTypeDefault value
$radius

The border radius.

—

Used by

Author

border-radius-top-right

@mixin border-radius-top-right() { ... }
View source

Parameters

None.

Requires

See

Author

columns

mixins

column-count

@mixin column-count($val) { ... }
View source

Description

Generates the property column-count as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-count property.

—

Author

column-fill

@mixin column-fill($val) { ... }
View source

Description

Generates the property column-fill as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-fill property.

—

Author

column-gap

@mixin column-gap($val) { ... }
View source

Description

Generates the property column-gap as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-gap property.

—

Author

column-rule

@mixin column-rule($val) { ... }
View source

Description

Generates the property column-rule as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-rule property.

—

Author

column-rule-color

@mixin column-rule-color($val) { ... }
View source

Description

Generates the property column-rule-color as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-rule-color property.

—

Author

column-rule-style

@mixin column-rule-style($val) { ... }
View source

Description

Generates the property column-rule-style as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-rule-style property.

—

Author

column-rule-width

@mixin column-rule-width($val) { ... }
View source

Description

Generates the property column-rule-width as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-rule-width property.

—

Author

column-span

@mixin column-span($val) { ... }
View source

Description

Generates the property column-span as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-span property.

—

Author

column-width

@mixin column-width($val) { ... }
View source

Description

Generates the property column-width as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the column-width property.

—

Author

columns

@mixin columns($val) { ... }
View source

Description

Generates the property columns as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the columns property.

—

Author

multi-column-width

@mixin multi-column-width($num-of-columns) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$num-of-columns

TODO

Number—

Example

// Usage:
.my-selector {
  @include multi-column-width(5);
}

// Output:
.my-selector:only-child {
  width: 100%;
}

.my-selector:first-child:nth-last-child(5),
.my-selector:first-child:nth-last-child(5) ~ .my-selector:first-child {
  width: 20%;
}

Requires

TODO's

  • Add Documentation

Author

margin

mixins

margin-bottom-left

@mixin margin-bottom-left($val) { ... }
View source

Description

Sets margin-bottom and margin-left to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Author

margin-bottom-right

@mixin margin-bottom-right($val) { ... }
View source

Description

Sets margin-bottom and margin-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Author

margin-bottom-sides

@mixin margin-bottom-sides($val) { ... }
View source

Description

Sets margin-bottom, margin-left, and margin-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Requires

Author

margin-sides

@mixin margin-sides($val) { ... }
View source

Description

Sets margin-left and margin-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Used by

Author

margin-top-bottom

@mixin margin-top-bottom($val) { ... }
View source

Description

Sets margin-top and margin-bottom to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Author

margin-top-left

@mixin margin-top-left($val) { ... }
View source

Description

Sets margin-top and margin-left to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Author

margin-top-right

@mixin margin-top-right($val) { ... }
View source

Description

Sets margin-top and margin-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Author

margin-top-sides

@mixin margin-top-sides($val) { ... }
View source

Description

Sets margin-top, margin-left, and margin-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Margin amount.

—

Requires

Author

padding

mixins

padding-bottom-left

@mixin padding-bottom-left($val) { ... }
View source

Description

Sets padding-bottom and padding-left to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Author

padding-bottom-right

@mixin padding-bottom-right($val) { ... }
View source

Description

Sets padding-bottom and padding-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Author

padding-bottom-sides

@mixin padding-bottom-sides($val) { ... }
View source

Description

Sets padding-bottom, padding-left, and padding-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Requires

Author

padding-sides

@mixin padding-sides($val) { ... }
View source

Description

Sets padding-left and padding-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Used by

Author

padding-top-bottom

@mixin padding-top-bottom($val) { ... }
View source

Description

Sets padding-top and padding-bottom to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Author

padding-top-left

@mixin padding-top-left($val) { ... }
View source

Description

Sets padding-top and padding-left to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Author

padding-top-right

@mixin padding-top-right($val) { ... }
View source

Description

Sets padding-top and padding-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Author

padding-top-sides

@mixin padding-top-sides($val) { ... }
View source

Description

Sets padding-top, padding-left, and padding-right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Padding amount.

—

Requires

Author

miscellaneous

variables

pt-per-px

$pt-per-px: 0.75pt;
View source

Description

The number of pts per pixel.

Type

Point

Used by

Author

px-per-pt

$px-per-pt: 1px + (1px/3);
View source

Description

The number of pixels per pt.

Type

Pixel

Used by

Author

string-empty

$string-empty: '';
View source

Description

An empty string. (Using this can help increase code readability).

Type

String

Used by

Author

string-space

$string-space: ' ';
View source

Description

A space character. (Using this can help increase code readability).

Type

String

Author

functions

prepend-slash

@function prepend-slash($value) { ... }
View source

Description

Adds a slash (\) to the beginning of the given value.

Parameters

NameDescriptionTypeDefault value
$value

Value on which to prepend a slash.

—

Returns

String —

$value prepended with a \ character.

Example

// Usage:
content: prepend-slash(2716);

// Output:
content: "\2716";

Author

process-browser-prefix

@function process-browser-prefix($browser-prefix) { ... }
View source

Description

Processes browser prefixes to be used when generating vendor prefix versions of properties for functions.

Parameters

NameDescriptionTypeDefault value
$browser-prefix

The browser prefix to process.

String—

Returns

String —

$browser-prefix wrapped in dashes (-). If $browser-prefix is an empty string, then an empty string is returned.

Example

// Usage:
#{process-browser-prefix('webkit')}user-select: none;
#{process-browser-prefix('')}user-select: none;

// Output:
-webkit-user-select: none;
user-select: none;

Requires

Author

add-percent-sign

@function add-percent-sign($num) { ... }
View source

Description

Adds a percent sign (%) to the given number.

Parameters

NameDescriptionTypeDefault value
$num

Value to add % sign to.

Number—

Returns

Percent —

$num witha % appended to it.

Example

// Usage:
width: add-percent-sign(42);

// Output:
width: 42%;

Used by

Author

percentage-of-pieces

@function percentage-of-pieces($num-of-pieces) { ... }
View source

Description

Gets the percentage that the given $num-of-pieces is out of 100.

Parameters

NameDescriptionTypeDefault value
$num-of-pieces

Represents the number of times you are dividing something (I.E. number of pieces of a whole).

Number—

Returns

Percent —

A percentage value of 100 / $num-of-pieces.

Example

// Usage:
width: percentage-of-pieces(5);
height: percentage-of-pieces(3);

// Output:
width: 20%;
height: 33.33333%;

Requires

Used by

Author

mixins

appearance

@mixin appearance($val) { ... }
View source

Description

Generates the property appearance as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the appearance property.

—

Author

box-shadow

@mixin box-shadow($vals...) { ... }
View source

Description

Generates the property box-shadow as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$vals...

The value(s) of the box-shadow property.

—

Author

box-sizing

@mixin box-sizing($val) { ... }
View source

Description

Generates the property box-sizing as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the box-sizing property.

—

Author

cursor-pointer

@mixin cursor-pointer() { ... }
View source

Description

Sets the cursor to a pointer with cross browser compatibility.

Parameters

None.

Author

filter

@mixin filter($val) { ... }
View source

Description

Generates the property filter as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the filter property.

—

Author

font-icon-defaults

@mixin font-icon-defaults() { ... }
View source

Description

Adds sensible default property values for an element displaying a font icon.

For a good example of font icons, refer to http://fontawesome.io.

(Note: The font-family property is NOT set by this mixin).

Parameters

None.

Requires

Author

font-smoothing

@mixin font-smoothing($val) { ... }
View source

Description

Generates the property font-smoothing as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the font-smoothing property.

—

Used by

Author

linear-gradient

@mixin linear-gradient($property, $vals...) { ... }
View source

Description

Generates the given property with a linear-gradient value as well as each necessary vendor prefix for that value.

Parameters

NameDescriptionTypeDefault value
$property

The property to generate.

String—
$vals...

The value(s) to pass to the linear-gradient function.

—

Example

// Usage:
@include linear-gradient(background, left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%)

// Output:
background: -webkit-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
background: -moz-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
background: -ms-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
background: -o-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
background: linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);

Author

opacity

@mixin opacity($val) { ... }
View source

Description

Generates the property opacity as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the opacity property.

—

Author

position-sides

@mixin position-sides($val) { ... }
View source

Description

Sets left and right to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Position value.

—

Author

position-top-bottom

@mixin position-top-bottom($val) { ... }
View source

Description

Sets top and bottom to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Position value.

—

Author

remove-from-print

@mixin remove-from-print() { ... }
View source

Description

Causes element(s) to be completely absent from print media.

Parameters

None.

Used by

See

Author

repeating-linear-gradient

@mixin repeating-linear-gradient($property, $vals...) { ... }
View source

Description

Generates the given property with a repeating-linear-gradient value as well as each necessary vendor prefix for that value.

Parameters

NameDescriptionTypeDefault value
$property

The property to generate.

String—
$vals...

The value(s) to pass to the repeating-linear-gradient function.

—

Example

// Usage:
@include repeating-linear-gradient(color, left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%)

// Output:
color: -webkit-repeating-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
color: -moz-repeating-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
color: -ms-repeating-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
color: -o-repeating-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);
color: repeating-linear-gradient(left, #ff0 0%, #f00 50%, #000 51%, #222 71%, #fff 100%);

Author

size

@mixin size($val) { ... }
View source

Description

Sets width and height to the same value.

Parameters

NameDescriptionTypeDefault value
$val

Size value.

—

Author

text-size-adjust

@mixin text-size-adjust($val) { ... }
View source

Description

Generates the property text-size-adjust as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the text-size-adjust property.

—

Author

transform

@mixin transform($val) { ... }
View source

Description

Generates the property transform as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the transform property.

—

Author

user-select

@mixin user-select($val) { ... }
View source

Description

Generates the property user-select as well as each necessary vendor prefix.

Parameters

NameDescriptionTypeDefault value
$val

The value of the user-select property.

—

Author

placeholders

remove-from-print

%remove-from-print { ... }
View source

Description

Causes any inheriting children to be completely absent from print media.

Requires

See

Author

unit manipulation

functions

add-mixed-units

@function add-mixed-units($return-unit, $vals) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$return-unit

TODO

String—
$vals

TODO

Em or Point or Pixel—

Returns

Em or Point or Pixel —

TODO

Example

TODO

Throws

  • $return-unit must be either

  • $vals cannot be empty.

  • $vals must have more than one element if the $return-unit is

  • $vals cannot contain a value with

Requires

TODO's

  • Add Documentation

Author

em-to-pt

@function em-to-pt($em, $base: 12pt) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$em

TODO

Em—
$base

TODO

Point12pt

Returns

Point —

TODO

Throws

  • $em must either be unitless or be of the unit

  • $base must either be unitless or be of the unit

Requires

TODO's

  • Add Documentation

Author

em-to-px

@function em-to-px($em, $base: 16px) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$em

TODO

Em—
$base

TODO

Pixel16px

Returns

Pixel —

TODO

Throws

  • $em must either be unitless or be of the unit

  • $base must either be unitless or be of the unit

Requires

TODO's

  • Add Documentation

Author

pt-to-px

@function pt-to-px($pt) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$pt

TODO

Point—

Returns

Pixel —

TODO

Throws

  • $pt must either be unitless or be of the unit

Requires

Used by

TODO's

  • Add Documentation

Author

px-to-pt

@function px-to-pt($px) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$px

TODO

Pixel—

Returns

Point —

TODO

Throws

  • $px must either be unitless or be of the unit

Requires

Used by

TODO's

  • Add Documentation

Author

to-em

@function to-em($val, $base: 16px) { ... }
View source

Parameters

NameDescriptionTypeDefault value
$val

TODO

Pt or Px—
$base

TODO

Pt or Px16px

Returns

Em —

TODO

Throws

  • $val cannot be in

  • $base cannot be in

Requires

Used by

TODO's

  • Add Documentation

Author

remove-unit

@function remove-unit($num) { ... }
View source

Description

Removes any units used appended to the given number.

Parameters

NameDescriptionTypeDefault value
$num

Number from which units will be removed.

Number—

Returns

Number —

The same number given, but without the units.

Example

// Usage:
z-index: remove-unit(10px);

// Output:
z-index: 10;

Throws

  • The following unit is not supported:

Used by

Author