Bourbon is a lightweight Sass tool set providing pure Sass mixins, functions, and utilities with zero output post-install and no visual opinions. It offers a dependency-free toolkit focused on clarity and human-readable code, including essential mixins for common CSS tasks, color functions, typography helpers, layout utilities, and form input helpers.
gem install bourbon or npm install bourbon@import "bourbon";@import "~bourbon/core/bourbon";@import "core/bourbon";// Import Bourbon
@import "bourbon";
// Use color functions
.element {
background-color: tint(#6ecaa6, 40%);
color: shade(#ffbb52, 60%);
}
// Use typography with modular scale
.heading {
font-size: modular-scale(2);
font-family: $font-stack-helvetica;
}
// Use layout mixins
.box {
@include size(200px, 100px);
@include position(absolute, 10px null null 20px);
@include clearfix;
}
// Use custom font-face
@include font-face("source-sans-pro", "fonts/source-sans-pro-regular", ("woff2", "woff")) {
font-style: normal;
font-weight: 400;
}Configure Bourbon globally using the $bourbon settings map:
$bourbon: (
"contrast-switch-dark-color": #222,
"contrast-switch-light-color": #fafafa,
"global-font-file-formats": ("woff2", "woff"),
"modular-scale-base": 1rem,
"modular-scale-ratio": $major-third,
"rails-asset-pipeline": false,
);
@import "bourbon";Bourbon is organized into five main categories:
Color manipulation functions for creating consistent color palettes and improving accessibility.
@function tint($color, $percent);
@function shade($color, $percent);
@function contrast-switch($base-color, $dark-color: null, $light-color: null);Typography utilities including font-face generation, font stacks, and modular scale for consistent typography systems.
@mixin font-face($font-family, $file-path, $file-formats: null, $asset-pipeline: null);
@function modular-scale($increment, $value: null, $ratio: null);
// Font Stack Variables
$font-stack-helvetica: ("Helvetica Neue", "Helvetica", "Arial", sans-serif);
$font-stack-system: (system-ui, -apple-system, BlinkMacSystemFont, /* ... */);Layout utilities for positioning, sizing, spacing, and common layout patterns.
@mixin position($position, $box-edge-values);
@mixin size($width, $height: $width);
@mixin clearfix;
@mixin margin($values);
@mixin padding($values);Border utilities for setting border properties with CSS shorthand support and directional control.
@mixin border-color($values);
@mixin border-width($values);
@mixin border-style($values);
@mixin border-top-radius($radii);
@mixin border-right-radius($radii);
@mixin border-bottom-radius($radii);
@mixin border-left-radius($radii);Text manipulation utilities for truncation, accessibility, and content handling.
@mixin ellipsis($width: 100%, $display: inline-block);
@mixin hide-text;
@mixin hide-visually($toggle: "hide");
@mixin overflow-wrap($wrap: break-word);Cross-browser utilities for vendor prefixes and browser compatibility.
@mixin prefixer($property, $value, $prefixes: ());
@mixin value-prefixer($property, $value, $prefixes: ());Pre-built selector variables for targeting form inputs and buttons with pseudo-classes.
// Button Variables
$all-buttons: /* compiled button selectors */;
$all-buttons-active: /* compiled button:active selectors */;
$all-buttons-focus: /* compiled button:focus selectors */;
$all-buttons-hover: /* compiled button:hover selectors */;
// Text Input Variables
$all-text-inputs: /* compiled text input selectors */;
$all-text-inputs-active: /* compiled text input:active selectors */;
$all-text-inputs-focus: /* compiled text input:focus selectors */;
$all-text-inputs-hover: /* compiled text input:hover selectors */;
$all-text-inputs-invalid: /* compiled text input:invalid selectors */;Pre-defined CSS cubic-bezier timing functions for consistent animations.
// Ease-in timing functions
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
/* ... additional timing functions ... */
// Ease-out timing functions
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
/* ... additional timing functions ... */
// Ease-in-out timing functions
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
/* ... additional timing functions ... */Utilities for creating CSS shapes and graphic elements.
@mixin triangle($direction, $width, $height, $color);Mathematical functions for working with numbers and units.
@function strip-unit($value);// Configuration Types
$bourbon: (
"contrast-switch-dark-color": <color>,
"contrast-switch-light-color": <color>,
"global-font-file-formats": <list>,
"modular-scale-base": <number-with-unit>,
"modular-scale-ratio": <number-unitless>,
"rails-asset-pipeline": <boolean>,
) !default;
// Musical Scale Constants
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$golden: 1.618;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;