Compass is an open-source CSS authoring framework that gives you acces to a wide range of reusable patterns and mixins for creating advanced css i a breeze. I use Compass on a daily basis for nearly every project. I have compiled this list of my most commonly used tools in the compass library.

“So why use Compass” you might say. The main reason for using compass for these kinds of thing is that it keeps you from screwing up. A good example for this is background gradients: You set it once and compass compiles the correct prefixes and even generates svg’s for IE9. All this while keeping your sass nice and tidy.

Click here for help installing compas on your project

Text Shadow

.has-single-shadow { @include text-shadow( rgba(blue, 0.2) 1px 1px 0 ); }

// Can output up to ten text shadows
.has-multi-shadow {
  @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);
  }

Compiles to:

.has-single-shadow {
  text-shadow: rgba(0, 0, 255, 0.2) 1px 1px 0;
}

.has-multi-shadow {
  text-shadow: rgba(0, 0, 255, 0.2) 1px 1px 0, rgba(0, 0, 255, 0.2) 2px 2px 0, rgba(0, 0, 255, 0.2) 3px 3px 0;
}

Gradient

This will yield a radial gradient with an apparent specular highlight.

#radial-gradient {
  @include background-image(radial-gradient(45px 45px, aqua 10px, #1e90ff 30px));
}

This yields a linear gradient spanning from the upper left corner to the lower right corner

#linear-gradient {
  @include background-image(linear-gradient(left top, white, #dddddd));
}

This yields a gradient starting at the top with #fff, ending in #aaa

#v-gradient {
  @include background-image(linear-gradient(white, #aaaaaa));
}

Same as above but with a #ccc at the halfway point

#v-gradient-2 {
  @include background-image(linear-gradient(white, #cccccc, #aaaaaa));
}

Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top

#v-gradient-3 {
  @include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
}

This yields a horizontal linear gradient spanning from left to right.

#h-gradient {
  @include background-image(linear-gradient(left, white, #dddddd));
}

This “experimental” version generates a text based svg file that adds support for IE9 (Yay!)

#svg-gradient {
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}

All of these compiles into this:

#radial-gradient {
  background-image: -webkit-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -moz-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: -o-radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
  background-image: radial-gradient(45px 45px, #00ffff 10px, #1e90ff 30px);
}

#linear-gradient {
  background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
  background-image: linear-gradient(to right bottom, #ffffff, #dddddd);
}

#v-gradient {
  background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #aaaaaa);
  background-image: linear-gradient(#ffffff, #aaaaaa);
}

#v-gradient-2 {
  background-image: -webkit-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #cccccc, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc, #aaaaaa);
}

#v-gradient-3 {
  background-image: -webkit-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: -moz-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: -o-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
  background-image: linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa);
}

#h-gradient {
  background-image: -webkit-linear-gradient(left, #ffffff, #dddddd);
  background-image: -moz-linear-gradient(left, #ffffff, #dddddd);
  background-image: -o-linear-gradient(left, #ffffff, #dddddd);
  background-image: linear-gradient(to right, #ffffff, #dddddd);
}

#svg-gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  background-image: linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2);
  width: 80px;
  height: 80px;
}

Box sizing

#content-box {
  @include box-sizing(content-box);
}

#border-box {
  @include box-sizing(border-box);
}

Compiles into:

#content-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Box Shadow

#box-shadow-custom {
  @include box-shadow(red 2px 2px 10px);
}

Compiles into:

#box-shadow-custom {
  -webkit-box-shadow: red 2px 2px 10px;
  -moz-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
}

Opacity

.opacity-10 {
  @include opacity(0.1);
}

Compiles Into

.opacity-10 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}

Table Styling

.example {
  table {
    $table-color: #7a98c6;
    @include table-scaffolding;
    @include inner-table-borders(1px, darken($table-color, 40%));
    @include outer-table-borders(2px);
    @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
  }
}

Compiles to THIS!:

.example table {
  border: 2px solid black;
}
.example table th {
  text-align: center;
  font-weight: bold;
}
.example table td,
.example table th {
  padding: 2px;
}
.example table td.numeric,
.example table th.numeric {
  text-align: right;
}
.example table th, .example table td {
  border-right: 1px solid #233551;
  border-bottom: 1px solid #233551;
  border-left-width: 0px;
  border-top-width: 0px;
}
.example table th:last-child, .example table td:last-child {
  border-right-width: 0px;
}
.example table th.last, .example table td.last {
  border-right-width: 0px;
}
.example table tbody tr:last-child th, .example table tbody tr:last-child td, .example table tfoot tr:last-child th, .example table tfoot tr:last-child td {
  border-bottom-width: 0px;
}
.example table tbody tr.last th, .example table tbody tr.last td, .example table tfoot tr.last th, .example table tfoot tr.last td {
  border-bottom-width: 0px;
}
.example table thead th {
  border-bottom: 2px solid black;
}
.example table tfoot th, .example table tfoot td {
  border-top: 2px solid black;
}
.example table th:first-child, .example table th.first {
  border-right: 2px solid black;
}
.example table th {
  background-color: white;
}
.example table th.even, .example table th:nth-child(2n) {
  background-color: #dddddd;
}
.example table tr.odd td, .example table tr:nth-child(2n+1) td {
  background-color: #98c67a;
}
.example table tr.odd td.even, .example table tr.odd td:nth-child(2n), .example table tr:nth-child(2n+1) td.even, .example table tr:nth-child(2n+1) td:nth-child(2n) {
  background-color: #76a458;
}
.example table tr.even td {
  background-color: #7a98c6;
}
.example table tr.even td.even, .example table tr.even td:nth-child(2n) {
  background-color: #5876a4;
}
.example table tfoot th, .example table tfoot td {
  background-color: white;
}
.example table tfoot th.even, .example table tfoot th:nth-child(2n), .example table tfoot td.even, .example table tfoot td:nth-child(2n) {
  background-color: #dddddd;
}

Now these are just a handfull of the things you can do with compass. Tjeck out the full project at their website here: compass-style.org