Author Smarter Stylesheets with Sass Compass Integration

Michael Ruescher

Sass CompassToday, we're proud to announce that Sass Compass is now built right into Webpop’s IDE! Compass has been rising star in the world of CSS authoring abstractions, it's almost like the jQuery of CSS, mitigating the complexity of authoring modern CSS

To get started with it, simply import Compass at the top of any .scss or .sass file in your public folder, like so:

@import ‘compass’

What is Compass?

Compass is an open-source CSS authoring framework that runs on top of Sass that gives you the tools you need to author really expressive stylesheets with robust browser support. It comes loaded with a great collection of Sass mixins that greatly simplify authoring modern CSS styles.

If you want style an element with a simple CSS gradient, this is the code required to make a linear gradient work across all major browsers today:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, hsl(0, 100%, 100%)), color-stop(100%, hsl(0, 0%, 67%)));
background-image: -webkit-linear-gradient(hsl(0, 100%, 100%), hsl(0, 0%, 67%));
background-image: -moz-linear-gradient(hsl(0, 100%, 100%), hsl(0, 0%, 67%));
background-image: -o-linear-gradient(hsl(0, 100%, 100%), hsl(0, 0%, 67%));
background-image: linear-gradient(hsl(0, 100%, 100%), hsl(0, 0%, 67%));

Pretty ugly, right? If you want to edit this gradient, you’d have to edit it in at least five diffent places.

And this same situation arises all over your stylesheets whenver you want to use some of the newer CSS properties, AKA the fun stuff!

Compass helps you manage this tedium and complexity by abstracting it away with mixins. You can generate the same cross-browser linear gradient above with a one line Compass mixin.

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

Enough said. 

Awesome Open Source Community 

The coolest thing about Compass is the great community that contributes to keeping all the mixins and documentation up to date. You get to benefit from all that hardwork for free! The source code is on Github if you're interested in contributing.

HTML5 is Now Finally Ready to Kill Flash Once and For All

One of the most exciting parts of CSS3 are the animation and transitions specs. Together with javascript, this CSS3 standard is one the key parts of the spec leading the charge to replace Flash for building highly interactive sites and apps.

But transitions and animations are one of the more advanced and most rapidly evolving parts of web standards, so there is a bit of a learning curve. Often when it comes down to actually using CSS animations on a site and you start to hit the cross browser issues, it's easy to lose heart and decide that CSS3 animation isn't ready for prime time yet.

And that's where Compass comes in. It shields you from having to learn the multiple, complicated ( and constantly changing ) animation syntaxes of the major browsers. When you only need to declare animations styles in one place with a clean CSS-like syntax, it's alot easier to focus and get on with the business of actually creating awesome interactive experiences with modern web standards.

There is a ton more stuff to explore, be sure to bookmark the Compass Reference, you'll be checkin it often as you get started with using Compass.

While testing out Compass in Webpops cloud-based IDE over the past couple of days, I put together this interactive CSS-based pirate ship demo:

Sass Compass & Coffeescript Pirate Ship

Arrrr Matey! It's about time you became captain of your own CSS Pirate Ship !

Stay tuned for tutorials.

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
blog comments powered by Disqus