Vendor Prefix No More with Compass

Follow us on LinkedIn for our latest data and tips!


Vendor Prefix No More with Compass

We’re big proponents of the Sass pre-processor at appendTo. We’ve spent a lot of time evaluating our CSS workflow in order to write as modular code as possible, and have found that using Sass greatly aids in a project’s organization and efficiency, while allowing us to write reusable code faster and easier than we could with traditional CSS files. With that said, we’re even bigger fans of Compass, which we use alongside Sass on nearly all projects. Jumping from writing CSS to SCSS is a huge productivity boost in itself, but adding Compass to the mix just opens the door wide open to what you can do with CSS.

There’s too much awesomeness in Compass to cover all of it in one blog post, so I’ve picked out the most one of the more common things we tend to use it for: cross browser CSS3 mixins

Vendor prefixes are hard to remember

The cross browser CSS3 mixins are, hands down, my favorite things in Compass. As we all know, browser support for CSS3 properties is still varied. Most properties get rolled out by browser vendors in an experimental manner as the properties are in the proposal stage at the W3C, which leads the browser vendors to use their own prefixes for new properties. (i.e. -webkit, -moz, -o, -ms, etc.). This allows us to adopt the new properties earlier and start using them today, but only if we prefix them to accommodate the browsers we want to support.

So what does this mean to developers? It means we have to add 5 times the code just to use one property, and we have to make sure we remember all the vendor prefixes. Kind of a pain, right?


Compass to the rescue

Using Compass’ cross browser mixins, we can turn this:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

into this:

@include border-radius(4px);

Compass @include‘s will compile with all the appropriate vendor prefixes defined, leaving you no worry, my friend!

The Syntax

The @include syntax is very simple. The property follows the @include statement and the property value lies in parentheses.

@include property-name(property-value);

Available Properties

We can use Compass’ CSS3 module for vendor prefixing many properties. Listed below are ~90 properties with their proper Compass syntax. A full list of available mixins (beyond just CSS mixins) can be found in the Compass docs.

CSS PropertyNotesCompass Syntax (with sample values)
appearance@include appearance(button)
apply-originTransform-origin sent as a complete string@include apply-origin(top left, 3D-only);
backgroundGreat for when using multiple backgrounds@include background(url(sample.png) 1em 1em no-repeat, url(example.png) 2em 2em no-repeat), #BADA55;
backface-visibility@include backface-visibility(hidden);
background-with-css2-fallbackFallback for browsers that don’t support multiple backgrounds@include background-with-css2-fallback(url(sample.png) 1em 1em no-repeat, url(example.png) 2em 2em no-repeat), #000;
background-image@include background-image(url(sample.png) 1em 1em no-repeat, url(example.png) 1em 2em no-repeat);
background-clip@include background-clip(border-box);
background-origin@include background-origin(padding-box);
background-size@include background-size(100%, 75%);
border-radius@include border-radius(.863em);
border-corner-radiusRound radius at position by amount@include border-corner-radius(50% 20%, .863em, border-top-radius);
border-top-left-radius@include border-top-left-radius(.863em);
border-top-right-radius@include border-top-right-radius(.863em);
border-bottom-left-radius@include border-bottom-left-radius(.863em);
border-bottom-right-radius@include border-bottom-right-radius(.863em);
border-top-radius@include border-top-radius(.863em);
border-right-radius@include border-right-radius(.863em);
border-bottom-radius@include border-bottom-radius(.863em);
border-left-radius@include border-left-radius(4px);
border-image@include border-image(url(border.png) 15 15 round);
display-boxAccepts no value; must be used for any of the other flexbox mixins to work@include display-blox;
box-orient@include box-orient(horizontal);
box-align@include box-align(center);
box-flex@include box-flex(2.0);
box-flex-group@include box-flex-group(1);
box-ordinal-group@include box-ordinal-group(1);
box-direction@include box-direction(reverse);
box-lines@include box-lines(multiple);
box-pack@include box-pack(center);
box-shadow@include box-shadow(.5em .5em .25em #000);
box-sizing@include box-sizing(border-box);
columns@include columns(10em 2);
column-count@include column-count(3);
column-gap@include column-gap(2em);
column-width@include column-width(5em);
column-rule-width@include column-rule-width(1em);
column-rule-style@include column-rule-style(dotted);
column-rule-color@include column-rule-color(#000);
column-rule@include column-rule(.5em outset #000);
column-break-before@include column-break-before(column);
column-break-after@include column-break-after(column);
column-break-inside@include column-break-inside(avoid);
column-breakAll-purpose mixin for setting column breaks@include column-break(before, always);
content@include content(“this is content”);
create-transformFull transform mixin for setting any combination of transforms as arguments; not recommended for daily use@include create-transform();
filter-gradientFor IE6 – 8 support@include filter-gradient(#000, #ccc, vertical);
flow-intoSee CSS-Tricks for great explanation@include flow-into(name);
flow-fromSee CSS-Tricks for great explanation@include flow-from(name);
font-faceThere are reports that the font-face mixin does not output the appropriate code for use in IE8, so be careful@include font-face(“Font Name”, font-files(“font-name.woff”, woff, “font-name.otf”, opentype), “font-name.eot”);
hyphens@include hyphens(auto);
hyphenationGenerates word-break and hyphens vendor prefixed properties; based on Kenneth Auchenberg’s post@include hyphenation;
inline-blockRefer to the Compass docs for more explanation@include inline-block(middle);
list-style-image@include list-style-image(url(images.png));
list-style@include list-style(none);
opacity@include opacity(.5);
perspective@include perspective(500);
perspective-origin@include perspective-origin(10% 10%);
rotate@include rotate(180deg);
rotateX@include rotateX(180deg);
rotateY@include rotateY(180deg);
rotateZ@include rotateX(180deg);
rotate3d@include rotate3d(1, 0, 2, 180deg);
scale@include scale(2, 1.5);
scaleX@include scaleX(2);
scaleY@include scaleY(1.5);
scaleZ@include scaleZ(1.5);
scale3d@include scale3d(2, 1, 2);
simple-transformA simplified set of options backwards-compatible with the previous version of the ‘transform’ mixin@include simple-transform(1.5, 35deg, );
single-text-shadow@include single-text-shadow(2px, 0, 2px, #cdcdcd);
single-transition@include single-transition(color, 0.5s, ease-in-out, 0);
skew@include skew(45deg);
skewX@include skewX(45deg);
skewY@include skewY(45deg);
text-shadow@include text-shadow(.125em .125em #000, -.125em -.125em #000);
transform@include transform(rotate(7deg) scale(2));
transform2d@include transform2d(rotate(7deg) scale(2));
transform-origin@include transform-origin(20% 40%);
transform-style@include transform-style(preserve-3d);
transition@include transition(all .3s ease-in);
transition-property@include transition-property(width);
transition-duration@include transition-duration(.3s);
transition-timing-function@include transition-timing-function(linear);
transition-delay@include transition-delay(2s);
translate@include translate(15px, 35px);
translateX@include translateX(15px);
translateY@include translateY(35px);
translateZ@include translateZ(20px);
translate3d@include translate3d(15px, 35px, 20px);
word-break@include word-break(break-all);