Source on Github

compass recipes using sass

Lots of CSS Recipes, made with Compass using Sass. Ready to use.



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;

Demos View in Fullscreen

Submit a recipe

It's easy to sumbit your own recipe. Using Github you just need to fork & add your recipes into stylesheets/recipes/ in the appropriate folder.
Do not forget to add a visual test into tests/recipes/ with the same path you use for the recipe Sass code.
Please use only Scss syntax.