Using SASS and Compass

Customize and extend Bootstrap with SASS, a CSS preprocessor, and Compass, a CSS authoring framework, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

Why SASS?

Bootstrap is made with SASS at its core. It makes developing systems-based CSS faster, easier, and more fun.

Why Compass?

Compass provides presentational classes and mixins to provide even more powerful ways to create CSS stylesheets.

Learn more

Visit the official websites at http://sass-lang.com and http://compass-style.org to learn more.

Variables

Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with SASS though—assign colors or pixel values as variables and change them once.

Mixins

Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

Operations

Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.

Scaffolding and links

`$bodyBackground`	`$white`	Page background color
`$textColor`	`$grayDark`	Default text color for entire body, headings, and more
`$linkColor`	`#08c`	Default link text color
`$linkColorHover`	`darken($linkColor, 15%)`	Default link text hover color

Grid system

`$gridColumns`	12
`$gridColumnWidth`	60px
`$gridGutterWidth`	20px
`$grid768ColumnWidth`	42px
`$grid768GutterWidth`	20px
`$grid1200ColumnWidth`	70px
`$grid1200GutterWidth`	30px
`$fluidGridColumnWidth`	6.382978723%
`$fluidGridGutterWidth`	2.127659574%
`$gridFluid768ColumnWidth`	5.801104972%
`$gridFluid768GutterWidth`	2.762430939%
`$gridFluid1200ColumnWidth`	5.982905983%
`$gridFluid1200GutterWidth`	2.564102564%

Typography

`$sansFontFamily`	"Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif
`$serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`$monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`$baseFontSize`	13px	Must be pixels
`$baseFontFamily`	`$sansFontFamily`
`$baseLineHeight`	18px	Must be pixels
`$altFontFamily`	`$serifFontFamily`
`$headingsFontFamily`	`"Helvetica Neue", Helvetica, $sansFontFamily`
`$headingsFontWeight`	`bold`
`$headingsColor`	`inherit`

Tables

`$tableBackground`	`transparent`
`$tableBackgroundAccent`	`#f9f9f9`
`$tableBackgroundHover`	`#f5f5f5`
`$tableBorder`	`#ddd`

Grayscale colors

`$black`	#000
`$grayDarkest`	#111
`$grayDarker`	#222
`$grayDark`	#333
`$gray`	#555
`$grayLight`	#999
`$grayLighter`	#eee
`$white`	#fff

Accent colors

`$blue`	#049cdb
`$green`	#46a546
`$red`	#9d261d
`$yellow`	#ffc40d
`$orange`	#f89406
`$pink`	#c3325f
`$purple`	#7a43b6

Components

Buttons

`$btnBackground`	`$white`
`$btnBackgroundHighlight`	`darken($white, 10%)`
`$btnBorder`	`darken($white, 20%)`
`$btnPrimaryBackground`	`$linkColor`
`$btnPrimaryBackgroundHighlight`	`spin($btnPrimaryBackground, 15%)`
`$btnInfoBackground`	`#5bc0de`
`$btnInfoBackgroundHighlight`	`#2f96b4`
`$btnSuccessBackground`	`#62c462`
`$btnSuccessBackgroundHighlight`	`51a351`
`$btnWarningBackground`	`lighten($orange, 15%)`
`$btnWarningBackgroundHighlight`	`$orange`
`$btnDangerBackground`	`#ee5f5b`
`$btnDangerBackgroundHighlight`	`#bd362f`
`$btnInverseBackground`	`$gray`
`$btnInverseBackgroundHighlight`	`$grayDarker`

Forms

`$placeholderText`	`$grayLight`
`$inputBackground`	`$white`
`$inputBorder`	`#ccc`
`$inputBorderRadius`	`3px`
`$inputDisabledBackground`	`$grayLighter`
`$formActionsBackground`	`#f5f5f5`

Form states and alerts

`$warningText`	#c09853
`$warningBackground`	#f3edd2
`$errorText`	#b94a48
`$errorBackground`	#f2dede
`$successText`	#468847
`$successBackground`	#dff0d8
`$infoText`	#3a87ad
`$infoBackground`	#d9edf7

Navbar

`$navbarHeight`	40px
`$navbarBackground`	`$grayDarker`
`$navbarBackgroundHighlight`	`$grayDark`
`$navbarText`	`$grayLight`
`$navbarLinkColor`	`$grayLight`
`$navbarLinkColorHover`	`$white`
`$navbarLinkColorActive`	`$navbarLinkColorHover`
`$navbarLinkBackgroundHover`	`transparent`
`$navbarLinkBackgroundActive`	`$navbarBackground`
`$navbarSearchBackground`	`lighten($navbarBackground, 25%)`
`$navbarSearchBackgroundFocus`	`$white`
`$navbarSearchBorder`	`darken($navbarSearchBackground, 30%)`
`$navbarSearchPlaceholderColor`	`#ccc`
`$navbarBrandColor`	`$navbarLinkColor`

Dropdowns

`$dropdownBackground`	`$white`
`$dropdownBorder`	`rgba(0,0,0,.2)`
`$dropdownLinkColor`	`$grayDark`
`$dropdownLinkColorHover`	`$white`
`$dropdownLinkBackgroundHover`	`$linkColor`
`$$dropdownDividerTop`	`#e5e5e5`
`$$dropdownDividerBottom`	`$white`

Modals

`$modalBorderRadius`	`4px`
`$modalMaxContentHeight`	`600px`
`$modalMaxWidth`	`810px`
`$modalMaskOpacity`	`90`
`$modalBackgroundColor`	`$white`
`$modalFontColor`	`inherit`
`$modalBorder`	`0px`
`$modalMediaBackgroundColor`	`$grayDarker`
`$modalMediaFontColor`	`inherit`
`$modalHeaderBorder`	`0px`
`$modalHeaderBackgroundColor`	`$grayDark`
`$modalHeaderFontColor`	`$grayLighter`
`$modalFooterBorder`	`0px`
`$modalFooterBackgroundColor`	`$white`
`$modalFooterFontColor`	`inherit`
`$modalGalleryThumbnailsBackgroundColor`	`$grayDarkest`
`$modalGalleryMediaWidth`	`525px`

Hero unit

`$heroUnitBackground`	`$grayLighter`
`$heroUnitHeadingColor`	`inherit`
`$heroUnitLeadColor`	`inherit`

About mixins

Basic mixins

A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.

        .element {
        .clearfix();
        }

Parametric mixins

A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.

        .element {
        .border-radius(4px);
        }

Easily add your own

Nearly all of Bootstrap's mixins are stored in mixins.SASS, a wonderful utility .SASS file that enables you to use a mixin in any of the .SASS files in the toolkit.

So, go ahead and use the existing ones or feel free to add your own as you need.

Included mixins

Utilities

Mixin	Parameters	Usage
`clearfix()`	none	Add to any parent to clear floats within
`tab-focus()`	none	Apply the Webkit focus style and round Firefox outline
`center-block()`	none	Auto center a block-level element using `margin: auto`
`ie7-inline-block()`	none	Use in addition to regular `display: inline-block` to get IE7 support
`size()`	`$height $width`	Quickly set the height and width on one line
`square()`	`$size`	Builds on `size()` to set the width and height as same value
`opacity()`	`$opacity`	Set, in whole numbers, the opacity percentage (e.g., "50" or "75")

Forms

Mixin	Parameters	Usage
`placeholder()`	`$color: $placeholderText`	Set the `placeholder` text color for inputs

Typography

Mixin	Parameters	Usage
`font-family-serif()`	none	Make an element use a serif font stack
`font-family-sans-serif()`	none	Make an element use a sans-serif font stack
`font-family-monospace()`	none	Make an element use a monospace font stack
`font-shorthand()`	`$size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight`	Easily set font size, weight, and leading
`font-serif()`	`$size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight`	Set font family to serif, and control size, weight, and leading
`font-sans-serif()`	`$size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight`	Set font family to sans-serif, and control size, weight, and leading
`font-monospace()`	`$size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight`	Set font family to monospace, and control size, weight, and leading

Grid system

Mixin	Parameters	Usage
`.container-fixed()`	none	Create a horizontally centered container for holding your content
`grid-core()`	`$gridColumnWidth, $gridGutterWidth`	Generate a pixel grid system (container, row, and columns) with n columns and x pixel wide gutter
`grid-fluid()`	`$fluidGridColumnWidth, $fluidGridGutterWidth`	Generate a percent grid system with n columns and x % wide gutter
`grid-input()`	`$gridColumnWidth, $gridGutterWidth`	Generate the pixel grid system for `input` elements, accounting for padding and borders
`.makeColumn`	`$columns: 1, $offset: 0`	Turn any `div` into a grid column without the `.span*` classes

CSS3 properties

Mixin	Parameters	Usage
`.border-radius()`	`$radius`	Round the corners of an element. Can be a single value or four space-separated values
`.box-shadow()`	`$shadow`	Add a drop shadow to an element
`.transition()`	`$transition`	Add CSS3 transition effect (e.g., `all .2s linear`)
`.rotate()`	`$degrees`	Rotate an element n degrees
`.scale()`	`$ratio`	Scale an element to n times its original size
`.translate()`	`$x, $y`	Move an element on the x and y planes
`.background-clip()`	`$clip`	Crop the background of an element (useful for `border-radius`)
`.background-size()`	`$size`	Control the size of background images via CSS3
`.box-sizing()`	`$boxmodel`	Change the box model for an element (e.g., `border-box` for a full-width `input`)
`.user-select()`	`$select`	Control cursor selection of text on a page
`.backface-visibility()`	`$visibility: visible`	Prevent flickering of content when using CSS 3D transforms
`.resizable()`	`$direction: both`	Make any element resizable on the right and bottom
`.content-columns()`	`$columnCount, $columnGap: $gridGutterWidth`	Make the content of any element use CSS3 columns
`.hyphens()`	`$mode: auto`	CSS3 hyphenation when you want it (includes `word-wrap: break-word`)

Backgrounds and gradients

Mixin	Parameters	Usage
`translucent-background()`	`$color: $white, $alpha: 1`	Give an element a translucent background color
`translucent-border()`	`$color: $white, $alpha: 1`	Give an element a translucent border color
`gradient-vertical()`	`$startColor, $endColor`	Create a cross-browser vertical background gradient
`gradient-horizontal()`	`$startColor, $endColor`	Create a cross-browser horizontal background gradient
`gradient-directional()`	`$startColor, $endColor, $deg`	Create a cross-browser directional background gradient
`gradient-vertical-three-colors()`	`$startColor, $midColor, $colorStop, $endColor`	Create a cross-browser three-color background gradient
`gradient-radial()`	`$innerColor, $outerColor`	Create a cross-browser radial background gradient
`gradient-striped()`	`$color, $angle`	Create a cross-browser striped background gradient
`gradientBar()`	`$primaryColor, $secondaryColor`	Used for buttons to assign a gradient and slightly darker border

Using SASS and Compass

Built with SASS & Compass

Why SASS?

Why Compass?

Learn more

Variables

Mixins

Operations

Bootstrap variables SASS variables, their values, and usage guidelines

Scaffolding and links

Grid system

Typography

Tables

Grayscale colors

Accent colors

Components

Buttons

Forms

Form states and alerts

Navbar

Dropdowns

Modals

Hero unit

Bootstrap mixins

About mixins

Basic mixins

Parametric mixins

Easily add your own

Included mixins

Utilities

Forms

Typography

Grid system

CSS3 properties

Backgrounds and gradients