Some compass/sass mixins and snippets ready to use. Just a few for now, but a lot incoming !
Switch branches/tags
Nothing to show
Pull request Compare This branch is 88 commits behind MoOx:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Compass Recipes

A series of Compass and Sass mixins and functions for creating delicious CSS effects.

Compass Recipes is currently under active development. While it's being already used on multiple projects (even in production), you may encounter some issues. Please try it out in a project, and make suggestions or report bugs ! Your feedback matters.


Note: These are demos of the repository at its current state, not the last stable gem. To get the most up-to-date recipes, please see Installation for instructions on installing the repo at his current state

Types of Recipes

  • Backgrounds - Background patterns, gradients.
  • Color Variables Names & Advanced color functions like brightness()
  • Effects - Visual effects like bevel and cutout
  • Form skins - Only one at the moment.
  • Icon Fonts - Includes icon fonts helper and a few open source fonts.
  • Layout - Vertical centering and box layout shortcuts.
  • Media queries - Predefined queries for common device widths. Experimental: Uses sass --pre
  • Shadows - A wide collection of shadows which use pseudo elements to create fold effects, etc.
  • Shapes - Geometric and iconic shapes, created only with CSS
  • Shared - Common CSS tricks and hacks.
  • UI Lots of element styling for menu, buttons, loader, etc.
  • View other potential icoming items


Compass Recipes is available as a gem on, so installation is quite easy.

(sudo) gem install compass-recipes

*If you want all latests recipes, you can just checkout the recipes (or download as zip) and add '{your-path-here-or-./}compass-recipes/stylesheets' using additional_import_paths or add_import_path (see Compass configuration reference).

More informations on the Wiki*


When compass-recipes installed, you just need to require the compass plugin in your project

require 'compass-recipes'

Then you can include some recipes like this

@import "recipes/shape/triangle";
    @include triangle;

Like Compass does, you can include all recipes in a folder like this

@import "recipes/shape";

    @include triangle;

    @include square;


Compass Recipes has for now a little community because this projet is (for now) only at the beginning.

@Compass_Recipes on Twitter is a great place to ask very short questions that you want answered quickly.

There is also an IRC channel, #compass-recipes on

Feel free to ping @MoOx if he’s there to get his attention quickly. If there’s no one on #compass-recipes, you can try the #compass or maybe the #sass channel on IRC.

If you have a longer question (or no one’s around on IRC at the moment), drop a mail at You’ll usually get a response within a couple hours or so.

Open to All

If you have a nifty CSS trick that makes sense to be abstracted (and isn't already in another Github repo), please fork and submit a pull request. Note: If you are not the author of the CSS trick, you must get their permission before adding.


All fonts are repackaged using Fontsquirrel. Licences are distributed with the fonts.

Build Documentation

You do not need to build documentation for testing your recipes. Just run compass watch/compile at the root of the repositorie.

First you need bundle

bundle install

Then, to build the gh-pages from the tests/, you need to call

bundle exec rake pages

This process create the pages & push them to your gh-pages branch.


Compass Recipes is maintained by Maxime Thirouin, a french front-end web developer, and David Kaneda, creative director at Sencha.

Recurrent Contributors

Sous Chefs

While Maxime and David are the primary project maintainers, most of the core ideas and techniques in the recipes are not from them.

Credits & Thanks:

  • @chriscoyier (shapes & lots of tricks)
  • @leaverou (backgrounds patterns)
  • @necolas (normalize & tricks)
  • @simurai (awesomes design stuffs)
  • All of the people who contribute to the recipes (all names are in each recipes)

Additional Resources

Some other great CSS/SCSS/design projects for making delicious websites:

  • Subtle Patterns - Great collection of free background patterns, some of which are not possible with CSS alone.
  • Animate.sass - A bevy of pre-defined keyframe animations.
  • OMG Text - Some super-rad text effects using text-shadow


Copyright (c) 2012 Maxime Thirouin

Released under MIT Licence