142 lines
8.5 KiB
Markdown
142 lines
8.5 KiB
Markdown
---
|
|
title: "Compass v0.11 is Released!"
|
|
description: "Months in the making, Compass v0.11 continues to revolutionize CSS Frameworks."
|
|
author: 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.
|
|
|
|
In this post, we summarize the new features. For all the nitty gritty details, see the [CHANGELOG](/CHANGELOG/).
|
|
|
|
Compass is Charityware. If you love this release, [please donate to the UMDF](http://umdf.org/compass) on our behalf and help find a cure for thousands of children suffering from mitochondrial disease.
|
|
|
|
## Sass 3.1
|
|
|
|
This release required you to upgrade to Sass 3.1. This release brings a ton of great new features that Compass now uses and you can too!
|
|
|
|
* Proper List Support: Space and Comma separated lists used to cause values to become strings
|
|
when passing them to mixins. Now the values in lists are preserved as their original types.
|
|
* Sass-based Functions. Define your own value functions and use them anywhere.
|
|
* Keyword Style Argument passing to Functions and Mixins. It can be hard to understand what
|
|
the values being passed to a mixin or function are for, use keyword style arguments to
|
|
make it easier to understand remember and read mixin includes.
|
|
* `@media` bubbling. Responsive design meets nested selectors! Use a media declaration anywhere and it
|
|
will be bubbled to the top level for you.
|
|
|
|
For more information about the new Sass features, see the [Sass CHANGELOG](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html).
|
|
|
|
|
|
## 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, <span style="text-decoration: underline;">expect small point releases to adapt to new browser support and changes much more rapidly</span>. 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](/reference/compass/support/) 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](http://github.com/chriseppstein/compass/issues). 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 gradient syntax but tried to simplify it to some extent. But the gradient specification has evolved and because 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);
|
|
}
|
|
|
|
## Dead Simple Sprites
|
|
|
|
Spriting has never been easier with Compass. Nico Hagenburger joined the Compass team and we have built on his popular Lemonade plugin to make Compass sprites. Existing Lemonade users will need to upgrade.
|
|
|
|
The way they work is you place the sprite images in a folder,
|
|
import them into your stylesheet, and then you can use the sprite in your selectors in one
|
|
of several convenient ways.
|
|
|
|
For example, let's imagine that in your project's image folder there are four icons:
|
|
|
|
* `<images_dir>/icon/new.png`
|
|
* `<images_dir>/icon/edit.png`
|
|
* `<images_dir>/icon/save.png`
|
|
* `<images_dir>/icon/delete.png`
|
|
|
|
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
|
|
|
|
@import "icon/*.png";
|
|
@include all-icon-sprites;
|
|
|
|
And you'll get the following CSS output:
|
|
|
|
.icon-sprite,
|
|
.icon-delete,
|
|
.icon-edit,
|
|
.icon-new,
|
|
.icon-save { background: url('/images/icon-34fe0604ab.png') no-repeat; }
|
|
|
|
.icon-delete { background-position: 0 0; }
|
|
.icon-edit { background-position: 0 -32px; }
|
|
.icon-new { background-position: 0 -64px; }
|
|
.icon-save { background-position: 0 -96px; }
|
|
|
|
You can now apply the `icon-XXX` classes to your markup as needed.
|
|
|
|
Of course, this is Compass which means that underneath this simple veneer is a powerful system that you can use to customize your selectors and all kinds of other scenarios involving unicorns and rainbows. Get all the details in our [Spriting Tutorial](/help/tutorials/spriting/).
|
|
|
|
## 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](/reference/compass/typography/vertical_rhythm/). Based on [this excellent tutorial](http://24ways.org/2006/compose-to-a-vertical-rhythm) 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
|
|
|
|
## New Website
|
|
|
|
As you can see, we have a spiffy new website design from Compass Core team member [Brandon](http://brandonmathis.com/). A testament to the separation of content and presentation, most of this redesign was done by throwing out our old stylesheets and building new ones. If you don't like the light text on dark background theme, you can turn on the lights by clicking the power button in the upper right hand corner of every page.
|
|
|
|
## Much, Much More
|
|
|
|
There's more features in this release than would fit into this post. Here's some other things you'll find in this release:
|
|
|
|
* Custom directory and file watching (E.g. for pngcrush support)
|
|
* Compilation Callback support
|
|
* Trigonometric functions
|
|
|
|
Read the [CHANGELOG](/CHANGELOG/) for all the details.
|
|
|
|
Additionally, expect a point release to follow shortly with support for:
|
|
|
|
* Rails 3.1
|
|
|
|
Lastly, Compass v0.11 will have point releases as needed to adapt to changes in browser support for the CSS3 module.
|
|
|
|
## Many Thanks
|
|
|
|
Compass wouldn't be possible without Nathan Weizenbaum and his hard work on Sass. The latest Sass release
|
|
provides a ton of great features that have made this Compass release possible.
|
|
|
|
Compass is far to big for one person to manage it now. I'd like to thank the hard work of the Compass core team members:
|
|
|
|
* [Eric Meyer](http://eric.oddbird.net/)
|
|
* [Brandon Mathis](http://brandonmathis.com/)
|
|
* [Scott Davis](https://github.com/jetviper21)
|
|
* [Nico Hagenburger](http://www.hagenburger.net/)
|
|
|
|
Additionally, there were commits from 10 other great folks in this release and there's been [contributions from 68 people](https://github.com/chriseppstein/compass/contributors) in total so far.
|
|
|
|
Lastly thanks to the hundreds, if not thousands, of users who have helped test this release and provided valuable feedback, bug reports, and documentation suggestions. Together, we are making a real stylesheet framework and simplifying the lives of web developers across the world.
|