Better Stylesheets with Compass
We’re excited to announce that Harmony now has support for Compass.
What is Compass?
Compass is a CSS authoring framework that makes it easier to write maintainable stylesheets and cleaner markup. With Compass, it’s easy to write cross-browser compatible CSS3 without the overhead of maintaining all of the browser-specific styles.
Compass is built on top of SASS, an extension of CSS which adds features like nested rules, variables, mixins and selector inheritance. Compass processes the stylesheets you write into plain old CSS that is read by your browser.
Here is an example of adding rounded corners to a div with compass:
@import "compass";
div.featured {
background: #eee;
border: 1px solid #ddd;
@include border-radius(5px);
}
Compass then generates this CSS that is served to the browser:
div.featured {
background: #eee;
border: 1px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
Getting Started
Using compass in Harmony is easy. Simply open up your stylesheet in the theme editor and change the processor to Scss or Sass.
Now you can import compass and any of your other theme stylesheets, and when you save your stylesheets, Harmony will process them with compass.
@import "compass";
div.featured {
@include border-radius(5px);
}
See the Compass reference documentation for more information on using Compass.
Stoked to see this news fellas! Great work. Would love to have you on a future podcast for The Sass Way (http://thesassway.com/) to talk about how Sass and Compass has impacted Harmony and the feedback your users have given you.
Yes! I was secretly hoping for this feature but didn’t expect it to actually happen. Another reason Harmony rules.