4 Posts for April 2010

Selector Inheritance the Easy Way: Introducing @extend

Posted April 26, 2010

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so:

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

And our styles like so:

Haml/Sass 3 Release Candidate 1 Released

Posted April 26, 2010

To install:

gem install haml --pre

The release of RC 1 marks the last leg of the journey to the full release. Features are now frozen; all development effort until version 3 is released will go into bug fixes and other such minor improvements.

Haml/Sass 3 Beta 2 Released

Posted April 12, 2010

To install:

gem install haml --pre

While the second beta release of Haml/Sass 3 doesn’t have as much splashy, exciting stuff as beta 1, it’s got its fair share of new features. As before, almost all of these are in Sass, although there is at least one quite exciting Haml in the pipeline.

SCSS: Sass is a CSS Extension

Posted April 7, 2010

Update: Sass 3 Beta 2 introduces a sass-convert --recursive flag for recursively converting stylesheets. This post has been updated to use that flag.

In my post announcing the Sass 3 beta, I briefly mentioned SCSS (Sassy CSS), the new CSS-extension syntax coming in Sass 3. That was just a brief overview of the idea, though, so I want to go over the syntax and how to use it in more detail.

To begin with, SCSS was built from the ground up based on the CSS3 spec. This means that it’s 100% compatible with CSS3: every valid CSS3 document is a valid SCSS document that means the same thing. In addition, it supports all the hacks and vendor extensions we could find, even crazy nonstandard syntax like Microsoft’s expression() function and filter property.