Mixins

Animation

View source View spec

The animation mixin supports comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

box:hover {
  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);

  // The above outputs the same CSS as using independent, granular mixins.
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
}

Demo

Animation Delay

View source View spec

The animation-delay property specifies when an animation should start.

@include animation-delay(2s);

Animation Direction

View source View spec

The animation-direction property indicates whether the animation should play in reverse on alternate cycles.

@include animation-direction(alternate-reverse);

Animation Duration

View source View spec

The animation-duration property specifies the length of time that an animation should take to complete one cycle.

@include animation-duration(2s);

Animation Fill Mode

View source View spec

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

@include animation-fill-mode(backwards);

Animation Iteration Count

View source View spec

The animation-iteration-count property defines the number of times an animation cycle should be played before stopping.

@include animation-iteration-count(infinite);

Animation Name

View source View spec

The animation-name property specifies a list of animations that should be applied to the selected element.

@include animation-name(scale, slide);

Animation Play State

View source View spec

The animation-play-state property determines whether an animation is running or paused.

@include animation-play-state(paused);

Animation Timing Function

View source View spec

The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle.

@include animation-timing-function(ease);

Appearance

View source View spec

The appearance CSS property is used to display an element using a platform-native styling based on the operating system’s theme.

@include appearance(none);

Backface Visibility

View source View spec

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

@include backface-visibility(visible);

Background

View source View spec

The background mixin is used for adding multiple backgrounds using shorthand notation.

@include background(linear-gradient(red, green) left repeat);
@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange));
@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);

Background Image

View source View spec

The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The background-image mixin supports up to 10 background-images.

Use in combination with the linear-gradient function and the radial-gradient function.

// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));

// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
                           linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));

// NOT SUPPORTED
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);

// Background-image is not a shorthand property, therefore this doesn't make sense.

Demo

Note about shorthand notation

All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:

@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;

Border Image

View source View spec

Supports shorthand notation.

@include border-image(url(/images/border.png) 27 repeat);

Demo

Box Sizing

View source View spec

Deprecation Warning: The box-sizing mixin has been deprecated and will be removed in v5.0.

Changes the CSS box model of the element it’s applied to.

@include box-sizing(border-box);

Calc

View source View spec

A mixin for vendor-prefixing the CSS3 calc function. It accepts a property and a value.

@include calc(width, "100% - 80px");
Note: You must use interpolation to pass in a variable: #{…}.
$width: 100%;

@include calc(width, "#{$width} - 80px");

Filter

View source View spec

A mixin for generating clean, vendor-prefixed CSS3 filters.

@include filter(grayscale(50%));

Flexbox

View source View spec

The flexbox mixins are up to date with the 2014 W3C spec. The mixins also include fallbacks for the 2009 spec.

View all flexbox mixins

.parent {
  @include align-items(stretch);
  @include display(flex);
  @include flex-direction(row);
  @include justify-content(flex-start);
}

.parent > .child {
  @include flex(1);
}

Font Face

View source View spec

Generates an @font-face declaration. Accepts arguments for weight, style, usage with the Rails Asset Pipeline and file formats.

@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular");
@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-bold", bold);
@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-italic", normal, italic);

The $file-formats argument allows you specify your font’s file formats (the default is eot woff2 woff ttf svg:

@include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular", $file-formats: eot woff2 woff);

You can also use the Rails Asset Pipeline (place the fonts in app/assets/fonts/:

@include font-face("source-sans-pro", "source-sans-pro/source-sans-pro-regular", normal, $asset-pipeline: true, $file-formats: eot woff ttf);

Font Feature Settings

View source View spec

The font-feature-settings mixin is helpful for using the advanced typographic features included in some OpenType fonts.

// Use ligatures if the typeface and font file include them
@include font-feature-settings("liga");

// Use proportional numbers, but not automatic kerning
@include font-feature-settings("pnum", "kern" false);

HiDPI Media Query

View source View spec

The hidpi mixin allows you to generate a media query that targets HiDPI devices. It accepts an optional ratio argument, with the default ratio being 1.3. Find my device pixel ratio.

@include hidpi(1.5) {
  width: 20em;
}

CSS Output

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 20em;
}

Hyphens

View source View spec

The hyphens property tells the browser how to split words when wrapping lines. The mixin accepts either none, manual, or auto, and defaults to none if left blank.

@include hyphens(manual);

Image Rendering

View source View spec

The image-rendering mixin provides a hint to the user agent about how to handle its image rendering.

@include image-rendering(optimizeSpeed);

Keyframes

View source View spec

A mixin for generating clean vendor-prefixed keyframes.

@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  }
  to {
    @include transform(scale(1));
  }
}

CSS Output

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0); }

  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes fadeIn {
  from {
    -moz-transform: scale(0); }

  to {
    -moz-transform: scale(1); } }

@-o-keyframes fadeIn {
  from {
    -o-transform: scale(0); }

  to {
    -o-transform: scale(1); } }

@keyframes fadeIn {
  from {
    transform: scale(0); }

  to {
    transform: scale(1); } }

Linear Gradient

View source View spec

Gradient position is optional. Position can be a degree (90deg). Mixin supports up to 10 color-stops.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(to top, #8fdce5, #3dc3d1);
@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Demo

Perspective

View source View spec

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

@include perspective(300px);
@include perspective-origin(30% 30%);

Demo

1
2
3
4
5
6

Placeholder

View source View spec

Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Output

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

Radial Gradient

View source View spec

Takes up to 10 gradients. See also the Background Image mixin.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);

Demo

Selection

View source View spec

Outputs the spec and prefixed versions of the ::selection pseudo-element. Pass an argument of true to take the current element into consideration.

@include selection {
  background-color: #ffbb52;
}

.element {
  @include selection(true) {
    background-color: #ffbb52;
  }
}

CSS Output

::-moz-selection {
  background-color: #ffbb52;
}

::selection {
  background-color: #ffbb52;
}

.element::-moz-selection {
  background-color: #ffbb52;
}

.element::selection {
  background-color: #ffbb52;
}

Text Decoration

View source View spec

CSS3 changes the text-decoration property to be a shorthand for text-decoration-color, text-decoration-line, and text-decoration-style. This mixin will generate the necessary prefixes for these new properties and shorthand.

@include text-decoration(underline double rgb(124,213,224));
@include text-decoration-line(line-through);
@include text-decoration-style(double);
@include text-decoration-color(#e71d02);

Transform

View source View spec

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set

The transform-origin CSS property lets you modify the origin for transformations of an element.

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

@include transform(translateY(50px));
@include transform(scale(0.9) rotate(-3deg));
@include transform-origin(center top);
@include transform-style(preserve-3d);

Transition

View source View spec

This mixin provides a shorthand syntax and supports multiple transitions.

@include transition(all 2.0s ease-in-out);
@include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

To transition vendor-prefixed properties, e.g. -webkit-transform and -moz-transform, do not use the shorthand mixin. Instead, use the individual transition mixins:

@include transition-property(transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);

User Select

View source View spec

Controls the appearance (only) of selection. This does not have any affect on actual selection operation.

@include user-select(none);

Functions

Flex Grid

Deprecation Warning: The flex-grid has been moved to Neat and will be removed in the next major version release.

Use this mixin to easily create a flexible-grid layout.

The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.

This function takes the fluid grid equation (target / context = result) and uses columns to help define each.

$fg-column: 60px;             // Column Width
$fg-gutter: 25px;             // Gutter Width
$fg-max-columns: 12;          // Total Columns For Main Container

div {
  width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
  margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;

  p {
    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;
    float: left;
    margin: flex-gutter(4);   // returns (25px / 315px) = 7.936508%;
  }

  blockquote {
    float: left;
    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;
  }
}

Golden Ratio

Deprecation Warning: The golden-ratio function has been deprecated and will be removed in the next major version release. Use the modular-scale function instead.

Returns the golden ratio of a given number. Must provide a pixel or em value for the first argument. Also takes a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3...

Note: The golden-ratio function can be wrapped in Sass’s abs(), floor(), or ceil() functions to get the absolute value, round down, or round up, respectively.

// Positive number will increment up the golden-ratio
font-size: golden-ratio(14px,  1);
// returns: 22.652px

// Negative number will increment down the golden-ratio
font-size: golden-ratio(14px, -1);
// returns: 8.653px

Resources: modularscale.com

Grid Width

Deprecation Warning: The grid-width has been moved to Neat and will be removed in the next major version release.

Easily setup and follow a grid based design. Check out gridulator.com

The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.

$gw-column: 100px;          // Column Width
$gw-gutter: 40px;           // Gutter Width

div {
  width: grid-width(4);     // returns 520px;
  margin-left: $gw-gutter;  // returns 40px;
}

Modular Scale

View Source

This function increments up or down a defined scale, then returns an adjusted value. This helps establish consistent measurements and spacial relationships throughout your project. We provide a list of commonly used scales as pre-defined variables.

div {
  // Increment two steps up the default scale
  font-size: modular-scale(2); // returns: 1.77689em

  // Increment one step down the default scale
  font-size: modular-scale(-1); // returns: 0.75019em

  // Increment three steps up the default scale, with a base value of 2em
  font-size: modular-scale(3, 2em); // returns: 4.73719em
}

The default scale is the perfect fourth (1.333), which you can globally override:

$modular-scale-ratio: $golden;
$modular-scale-base: 1.2em;

div {
  font-size: modular-scale(2); // returns: 3.14151em
}

div {
  font-size: modular-scale(3, 2em, 1.234); // returns: 3.75816em
}

The function also supports double-stranded scales by passing it two base values.

div {
  font-size: modular-scale(3, 1em 1.6em, $major-seventh); // returns: 3em
}

Note: The function can be wrapped in Sass’s abs(), floor(), or ceil() functions to get the absolute value, round down or round up, respectively.

Resource: modularscale.com

Pixels to Ems

View source

Convert pixels to ems.

For a relational value, the input is calculated based on a parent value. The default parent is 16px.
The parent can be changed by passing an optional second value. Accepts unitless and pixel values for size.

font-size: em(12);
font-size: em(12, 24);

CSS Output

font-size: 0.75em;
font-size: 0.5em;

Pixels to Rems

View source

Convert pixels to rems.

This assumes 1rem is 16px. You can override this by defining a new size for the $em-base.

font-size: rem(12);

CSS Output

font-size: 0.75rem;

Strip Units

View source

This strips the units from a value. It’s used as a helper in the Pixel to Ems and Pixel to Rems functions.

$dimension: strip-units(12px);

CSS Output

$dimension: 12;

Tint & Shade

View source (Shade) View source (Tint)

Tint and Shade are different from lighten() and darken() functions that are built into Sass.

Tint is a mix of color with white. Shade is a mix of color with black. Both take a color and a percent argument.

background: tint(red, 40%);
background: shade(blue, 60%);

Unpack

View source

This is a shorthand for converting one to three dimensions into their four-value syntax. It’s used in the position mixin.

margin: unpack(1em 2em);

CSS Output

margin: 1em 2em 1em 2em;

Add-ons

Border Color

View source

The border-color mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-color(red green null blue);

CSS Output

border-top-color: red;
border-right-color: green;
border-left-color: blue;

Border Radius (Shorthand)

View source

These mixins provide a shorthand syntax to target and add border radii to both corners on one side of a box.

@include border-top-radius(5px);
@include border-right-radius(5px);
@include border-bottom-radius(5px);
@include border-left-radius(5px);

Example

.element {
  @include border-top-radius(5px);
}

CSS Output

.element {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

Border Style

View source

The border-style mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-style(dashed null solid);

CSS Output

border-top-style: dashed;
border-bottom-style: solid;

Border Width

View source

The border-width mixin accepts up to four widths, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-width(1em 20px null 100%);

CSS Output

border-top-width: 1em;
border-right-width: 20px;
border-left-width: 100%;

Button

Deprecation Warning: The button mixin has been deprecated and will be removed in the next major version release. Take a look at Bitters, which includes basic styles for buttons.

The button add-on provides well-designed buttons with a single line in your CSS.

The mixin supports a style parameter and an optional color argument. The available button styles are:

  • simple (default)
  • shiny
  • pill

Simple Button Style

The mixin can be called with no arguments, which will render a blue button with the simple style.

button {
  @include button;
}

Pill Button Style

button {
  @include button(pill);
}

Shiny Button Style

Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.

button {
  @include button(shiny, #ff0000);
}

Buttons (Variable)

View source

Generates variables for all HTML button elements. Please note that you must use interpolation on the variable: #{$all-buttons}.

#{$all-buttons} {
  background-color: #f00;
}

#{$all-buttons-focus},
#{$all-buttons-hover} {
  background-color: #0f0;
}

#{$all-buttons-active} {
  background-color: #00f;
}

CSS Output

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #f00;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #0f0;
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  background-color: #00f;
}

Clearfix

View source

Provides an easy way to include a clearfix for containing floats. We use this modern clearfix from cssmojo.

.wrapper {
  @include clearfix;
}

CSS Output

.wrapper::after {
  clear: both;
  content: "";
  display: table;
}

Directional Property

View source

A helper mixin enabling short-hand notation for directional properties. It accepts a prefix, suffix, and array of up to four values that map to top, right, bottom, and left, respectively. You can optionally pass in null for the suffix argument to ignore it. You can optionally pass a null argument for a directional value to ignore it.

This mixin is mostly used as a helper for others. See border-color, border-style, border-width, margin, and padding.

@include directional-property(border, width, 10px null 4px 3px);

CSS Output

border-top-width: 10px;
border-bottom-width: 4px;
border-left-width: 3px;

Ellipsis

View source

This mixin will truncate text, adding an ellipsis to represent overflow. It accepts an optional max-width argument, default max-width is 100%.

div {
  @include ellipsis(50%);
}

Font Stacks

View source

A series of default font stacks available as variables.

font-family: $georgia;
font-family: $helvetica;
font-family: $lucida-grande;
font-family: $monospace;
font-family: $verdana;

CSS Output

font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-family: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
font-family: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
font-family: "Verdana", "Geneva", sans-serif;

Hide Text

View Source

Hide text to show a background image (a logo, for example). It is based on the the "Kellum Method" image replacement.

This image replacement is an improvement over the HTML5 Boilerplate method, while still providing the same benefits.

A height declaration is no longer required, but inline-level elements will need block-level display styles ("block", "inline-block", etc) applied.

.element {
  @include hide-text;
  background-image: url(logo.png);
}

CSS Output

.element {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  background-image: url(logo.png);
}

Inline Block

Deprecation Warning: The inline-block mixin has been deprecated and will be removed in the next major version release. Bourbon will no longer support IE8 or lower.

The inline-block mixin provides support for the inline-block property in IE6 and IE7.

@include inline-block;

Margin

View source

The margin mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include margin(null 10px 3em 20vh);

CSS Output

margin-right: 10px;
margin-bottom: 3em;
margin-left: 20vh;

Padding

View source

The padding mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include padding(20vh null 10px 3em);

CSS Output

padding-top: 20vh;
padding-bottom: 10px;
padding-left: 3em;

Position

View source

A shorthand notation for positioning elements.

The first argument is optional and defaults to relative. The second argument is a space-delimited list of values for top, right, bottom and left; it follows the standard CSS shorthand notation.

Note: null values will be ignored. In the example below, this means that declarations will not be generated for the right and bottom properties.

.element {
  @include position(relative, 0 null null 10em);
}

CSS Output

.element {
  position: relative;
  top: 0;
  left: 10em;
}

Prefixer

View source

The prefixer is for generating vendor prefixed declarations. The prefixer accepts the following prefixes: webkit moz ms o spec.

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);
}

CSS Output

-webkit-box-sizing: $box;
   -moz-box-sizing: $box;
        box-sizing: $box;

Retina Image

View source

The retina-image mixin is a helper to generate a retina background image and non-retina background image. The retina background image will output to a HiDPI media query. The mixin uses a _2x.png filename suffix by default.

$filename will resolve a path to the image, e.g. "../../home-icon". For Rails, you can use the Asset Pipeline by passing true to the argument.

@retina-image($filename, $background-size, $extension*, $retina-filename*, $retina-suffix*, $asset-pipeline*)

* = optional

Argument Defaults

  • $extension: png
  • $retina-filename: null
  • $retina-suffix: _2x
  • $asset-pipeline: false
span {
  @include retina-image(home-icon, 32px 20px);
}

CSS Output

span {
  background-image: url(home-icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
  span {
    background-image: url(home-icon_2x.png);
    background-size: 32px 20px;
  }
}

Size

View source

Set width and height in a single statement. Accepts all units, including auto and inherit, unitless numbers, and intrinsic keywords like fill, max-content, min-content & fit-content. You can also use this mixin with the calc() CSS function.

@include size(2em); // width: 2em; height: 2em;
@include size(10em auto); // width: 10em; height: auto;
@include size(min-content 9rem); // width: min-content; height: 9rem;
@include size(20px calc(100% - 80px)); // width: 20px; height: calc(100% - 80px);

Text Inputs

View source

Generates variables for all HTML text-based inputs. Please note that you must use interpolation on the variable: #{$all-text-inputs}.

#{$all-text-inputs} {
  border: 1px solid #f00;
}

#{$all-text-inputs-focus},
#{$all-text-inputs-hover} {
  border: 1px solid #0f0;
}

#{$all-text-inputs-active} {
  border: 1px solid #00f;
}

CSS Output

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input:not([type]),
textarea {
  border: 1px solid #f00;
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input:not([type]):focus,
textarea:focus,
input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
input:not([type]):hover,
textarea:hover {
  border: 1px solid #0f0;
}

input[type="color"]:active,
input[type="date"]:active,
input[type="datetime"]:active,
input[type="datetime-local"]:active,
input[type="email"]:active,
input[type="month"]:active,
input[type="number"]:active,
input[type="password"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="text"]:active,
input[type="time"]:active,
input[type="url"]:active,
input[type="week"]:active,
input:not([type]):active,
textarea:active {
  border: 1px solid #00f;
}

Timing Functions

View source

These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations and transitions. The provided timing functions are the same as the jQuery UI demo: easing functions.

@include transition(all 5s $ease-in-circ);

Demo

  • $ease-in-quad
  • $ease-out-quad
  • $ease-in-out-quad
  • $ease-in-cubic
  • $ease-out-cubic
  • $ease-in-out-cubic
  • $ease-in-quart
  • $ease-out-quart
  • $ease-in-out-quart
  • $ease-in-quint
  • $ease-out-quint
  • $ease-in-out-quint
  • $ease-in-sine
  • $ease-out-sine
  • $ease-in-out-sine
  • $ease-in-expo
  • $ease-out-expo
  • $ease-in-out-expo
  • $ease-in-circ
  • $ease-out-circ
  • $ease-in-out-circ
  • $ease-in-back
  • $ease-out-back
  • $ease-in-out-back

Triangle

View source

Creates a visual triangle. Mixin takes ($size, $color, $direction)

The $size argument can take one or two values—width height.

The $color argument can take one or two values—foreground-color background-color.

$direction: up, down, left, right, up-right, up-left, down-right, down-left

@include triangle(12px, gray, down);
@include triangle(12px 6px, gray lavender, up-left);

Demo

Word Wrap

View Source

The word-wrap mixin makes it easy to force long text (like URLs) to wrap instead of breaking your layout.

It uses the ($word-wrap)argument, with a default value of break-word.

@include word-wrap;
@include word-wrap(normal);

Settings

Global Asset Pipeline

View source

A boolean global setting for all functions that take the $asset-pipeline variable. It’s set to false by default.

$asset-pipeline: true;

Output Bourbon Deprecation Warnings

View source

Enable or disable output of Bourbon’s deprecation-related Sass warnings. This variable must be declared before importing Bourbon. Set to true by default.

$output-bourbon-deprecation-warnings: true;

Global Em Base

View source

Sets global base em size for the px-to-em and px-to-rem function. This should be the same size as your body font-size. Setting default is 16px.

$em-base: 14px;

Global Prefixer

View source

By default, Bourbon outputs all vendor-prefixes specified by each mixin. You can optionally overwrite these global defaults by setting any of these variables to false at the top of your stylesheet.

$prefix-for-webkit:    true;
$prefix-for-mozilla:   true;
$prefix-for-microsoft: true;
$prefix-for-opera:     true;
$prefix-for-spec:      true;

Complete List

All Supported Functions, Mixins, and Addons

@ denotes a mixin and must be prefaced with @include.

Mixins

animation
  @ animation(*args)
  @ animation-delay(*args)
  @ animation-direction(*args)
  @ animation-duration(*args)
  @ animation-fill-mode(*args)
  @ animation-iteration-count(*args)
  @ animation-name(*args)
  @ animation-play-state(*args)
  @ animation-timing-function(*args)

background
  @ background(*args)
  @ background-image(*args)

border-radius
  @ border-top-radius(*args)
  @ border-bottom-radius(*args)
  @ border-left-radius(*args)
  @ border-right-radius(*args)

@ appearance(*args)
@ backface-visibility(*args)
@ border-image(*args)
@ box-sizing(*args)
@ calc(*args)

columns
  @columns(*args)
  @column-count(*args)
  @column-fill(*args)
  @column-gap(*args)
  @column-rule(*args)
  @column-rule-color(*args)
  @column-rule-style(*args)
  @column-rule-width(*args)
  @column-span(*args)
  @column-width(*args)

@ filter(*args)

flexbox
  Latest Spec
  @ align-content(*args)
  @ align-items(*args)
  @ align-self(*args)
  @ display(*args)
  @ flex(*args)
  @ flex-basis(*args)
  @ flex-direction(*args)
  @ flex-flow(*args)
  @ flex-grow(*args)
  @ flex-shrink(*args)
  @ flex-wrap(*args)
  @ justify-content(*args)
  @ order(*args)

  2009 Spec
  @ box(*args)
  @ box-align(*args)
  @ box-direction(*args)
  @ box-flex(*args)
  @ box-flex-group(*args)
  @ box-lines(*args)
  @ box-ordinal-group(*args)
  @ box-orient(*args)
  @ box-pack(*args)
  @ display-box

@ font-face
@ font-feature-settings
@ inline-block
@ hidpi
@ hyphens(*args)
@ image-rendering
@ keyframes
@ placeholder
@ perspective
@ linear-gradient(*args)
@ radial-gradient(*args)
@ selection
@ user-select

transform
  @ transform(*args)
  @ transform-origin(*args)

transition
  @ transition(*args)
  @ transition-delay(*args)
  @ transition-duration(*args)
  @ transition-property(*args)
  @ transition-timing-function(*args)

Functions

linear-gradient(*args)
modular-scale(*args)
em(*args)
rem(*args)
radial-gradient(*args)
shade(*args)
strip-units(*args)
tint(*args)
unpack(*args)

Add-ons

@ border-color(*args)
@ border-style(*args)
@ border-width(*args)
@ clearfix
@ hide-text
@ directional-property(*args)
@ ellipsis(*args)
@ margin(*args)
@ padding(*args)
@ position(*args)
@ prefixer(*args)
@ retina-image(*args)
@ size(*args)
@ triangle
@ word-wrap(*args)

HTML5 Inputs
  #{$all-text-inputs}
  #{$all-text-inputs-hover}
  #{$all-text-inputs-focus}
  #{$all-buttons}
  #{$all-buttons-hover}
  #{$all-buttons-focus}
  #{$all-buttons-active}

font-family
  $georgia
  $helvetica
  $lucida-grande
  $monospace
  $verdana

timing-functions
  $ease-in-*
  $ease-out-*
  $ease-in-out-*
  * = quad, cubic, quart, quint, sine, expo, circ, back

Settings

asset-pipeline
  $asset-pipeline

deprecation-warnings
  $output-bourbon-deprecation-warnings

em-base
  $em-base

prefixer-settings
  $prefix-for-webkit
  $prefix-for-mozilla
  $prefix-for-microsoft
  $prefix-for-opera
  $prefix-for-spec