Thursday, October 11, 2012

Compass Recipes

Compass Recipes


  • Backgrounds, patterns & gradients effects
  • Color, Variables Names, advanced color functions like `brightness()` & color scheme functions)
  • Effects, Visual effects like `glass`, `bevel`, `cutout` or `ribbon`
  • Forms, Only one at the moment. Please add yours :)
  • Icon fonts, Includes icon fonts helper and a few open source fonts as a compass extension (more info)
  • Image, More image mixins (& functions) than Compass deserve (dimensions, inline, simple spriting)
  • Layouts, Vertical centering and box layout shortcuts.
  • Media Queries, Shortcuts for media queries.
  • Shadows, A wide collection of shadows which use pseudo elements to create fold effects, etc.
  • Shapes, Geometric and iconic shapes, created only with CSS
  • UI components, Lots of element styling for loader, menu, overlay, separator, tooltip, etc.
  • Utilities, Very usefull utilities, trick, hacks

* More incomming (see compass recipes issues), feel free to make a pull request to add your own!


Compass Recipes is available as a gem (and use Sass and Compass)

gem update --system
gem install compass-recipes

Then in your compass configuration file config.rb, add :

require "compass-recipes"

If you are a designer, I encourage you to read the The Designer's Guide to the OSX Command Prompt.

For more information about alternative installation checkout the Readme on Github


Like every Compass components, you just need to import file and use some mixins.

@import "recipes/shape/triangle";
.my-triangle {
    @include triangle;

Like Compass does, you can include all recipes in a folder like this (some recipes examples have been sneaked)

@import "recipes/shape";
.my-triangle {
    @include triangle;
.my-square {
    @include square

@mixin my-weird-mixin($param: true) {
    @if ($param == true) { // == @if (param);
        background: lighten(#000, 10%);
    @else if ($param != null and $param == false) {
        background: darken(#fefefe, 10%);
    @else {
        @extend .selector;

@import "recipes/media-queries";
.sidebar {
    @include media-min(60em) {
        float: left;
    background: image-url("sidebar-bg.png");
    @include media-highres() {
        background: image-url("sidebar-bg@2x.png");
    // @2x include will be automatic soon ;)

@import "recipes/ui";

body.loading {
    &::before {
        @include ui-loader-pulse;

nav {
    @extend %my-nav-style;
    @include ui-menu-dropdown;

$tooltip-color: #000 !default;

.tooltip {
    @include ui-tooltip($tip-color: rgba($tooltip-color, .2));
    :first-letter {
        font-size: 1em

You can also includes all recipes in one line (this should add nothing to your stylesheets until you call mixins)

@charset "utf-8";

@import "recipes";

// then call whatever mixins you want !
body {
    @include background-carbon-fiber;

@include icon-font-face-fontawesome;
.icon {
    @include icon-font($class: 'fontawesome', $hover: null);
    // require .icon to have a data-icon="{unicode}", see tests to get custom unicode

.picture {
    @include effect-glass;

Tests for recipes