3.8 KiB
| title | description | author |
|---|---|---|
| Compass v0.11 is Released! | Months in the making, Compass v0.11 continues to revolutionize CSS Frameworks. | chris |
The Compass team is proud to announce that v0.11 is released. With this release, Compass & Sass continue to revolutionize the world of CSS Frameworks bringing never-before-seen features and unmatched simplicity, quality, and flexibility to your stylesheets.
Embracing CSS3
The power and flexibility of CSS3 is well known and web developers and designers are finding many new and interesting ways to take advantage of it. In Compass v0.11 we have revisited each CSS3 feature to ensure the greatest ease of use and similarity to CSS3 syntax. The compass internals for managing cross-browser compatibility have been rewritten to provide a powerful platform for moving as fast as the browser implementors are. Going forward, expect small point releases to adapt to new browser support and changes much more rapidly. By default, Compass provides out-of-the-box support for all modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is simple to configure which browser support we provide.
In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to learn a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would provide the details in a bug report. After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes.
Gradients Evolved
The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: linear-gradient and radial-gradient for setting the background-image property:
.linear {
@include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%))
}
This syntax was inspired by the original webkit syntax gradients but tried to simplify it to some extent. But the gradient specification has evolved, since gradients can be used anywhere an image can, so we now provide a mixin for each property that can accept gradients and the arguments can be any legal CSS3 value for the that property:
.linear {
@include background-image(linear-gradient(#FFF, #C00 25%, #0C0 75%, #000))
}
Which produces:
.linear {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(25%, #cc0000), color-stop(75%, #00cc00), color-stop(100%, #000000));
background-image: -webkit-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -moz-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: -o-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
background-image: linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
}
New Typography Module
New in this release is a typography module. Many of our utility mixins related to typography have been moved here, but the really exciting development is the addition of the vertical rhythm module. Based on this excellent tutorial from 24ways, it is now simpler than ever to compose to a vertical rhythm.
Blueprint 1.0
Blueprint is 1.0 now and the Compass port is updated to match the changes there. Some of the changes that blueprint made might affect your design, so if you don't want to take this upgrade, you should unpack blueprint before you upgrade:
compass unpack blueprint
T