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.

SCSS files use the .scss file extension. In almost all cases Sass will notice the file extension and use SCSS automatically. So if you grab the beta, you can to start using SCSS immediately.

SCSS also has all the power of Sass. It supports variables with the $ prefix that can be used anywhere in properties:

$blue: #3bbfce;
$margin: 16px;

.content_navigation {
  color: $blue;
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border: 2px $blue solid;
}

CSS rules in SCSS can be nested by simply including the child rule in the parent rule:

table.hl {
  margin: 2em 0;

  td.ln {
    text-align: right;
    padding-left: 0.2em;
  }
}

SCSS mixins are declared with @mixin and included with @include:

@mixin table-scaffolding {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th { padding: 2px; }
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-scaffolding;
}

Use SCSS

To use SCSS right now, first install the Sass 3 beta, via the Haml gem:

gem install haml --pre

Then you can use the sass executable to compile SCSS files:

sass style.scss style.css

You can also watch files or entire directories and compile them whenever they change:

sass --watch style.scss:style.css
sass --watch scss:stylesheets

You can also convert your Sass to SCSS using the new sass-convert tool:

# Convert a single file to SCSS syntax
$ sass-convert --from sass2 style.sass style.scss

# Convert all files to SCSS syntax
$ sass-convert --from sass2 --to scss --recursive .

Compatibility and Compass

SCSS and Sass are @import-compatible, which means that an SCSS file can import a Sass file and vice versa. This means that, for example, if you’re using a style library written in SCSS, you can use the indented syntax.

By far the most widely-used style library is Compass. When Compass releases the upcoming version 0.10, it will most likely be written in SCSS, because it’s easier to understand for people familiar with CSS. Since the two syntaxes are compatible, you can still use the indented syntax with Compass.

Read More

If you’re already familiar with Sass, the intro to SCSS for Sass users is a great place to start understanding more about SCSS. If you’re new to Sass entirely, the Sass 3 readme and reference manual are now written entirely about SCSS.

In general, the documentation in Sass 3 will focus on SCSS as the introductory syntax, since it’s more comfortable for people familiar with CSS. The indented syntax will still be documented, of course, but now it will be introduced as a variant of SCSS.

Andy said April 07, 2010:

Nathan, can we also convert from SCSS to Sass 3 using the sass-convert tool?

Trevor Menagh said April 07, 2010:

I am looking forward to playing with this. I love HAML, but have been hesitant to move to SASS because I am so familiar with CSS (the devil you know).

Nathan said April 07, 2010:

Andy: Yes. sass-convert file.scss file.sass.

Moritz Heidkamp said April 07, 2010:

Dear Nathan, thanks a lot for creating SASS—I use it in all my Rails projects and even on other ones. I just can’t look at plain CSS anymore :)

Having begun to play with Scheme a while ago I figured that S-expressions could be just as well suited for CSS and voilá, somebody thought of it already, of course. Now what I actually meant to tell you is that it is also called SCSS as in “Scheme CSS” or “Schemey CSS”! I took the liberty of implementing an SCSS parser and emitter for Chicken Scheme (look at the code here, no docs yet unfortunately) and created an extended version (creatively named “scss-plus”) which borrows the idea of nested declarations from SASS and brings it to SCSS—so feel accredited for inspiring it :)

Nathan said April 07, 2010:

Moritz: Huh, that’s a bit of a naming kerfuffle indeed. I think it’s too late for our SCSS to change its name… I guess referring to it as Sass SCSS when there’s potential ambiguity is the way to go.

Nicolas Chevallier said April 08, 2010:

I was using Less CSS, but I think I will switch to SASS since it’s more under active development. Thanks!

Nathan DeGruchy said April 12, 2010:

I guess I am the only one dissenting. I really like the current SASS language as-is. I feel like it makes it easier for me to organize my CSS into selector ‘groups’. CSS is alright, but I was always very messy with it and the amount of curly braces and semi-colons is just visually distracting.

I really want to like this new change, but I just don’t see the point. It feels like we’re going from python to perl.

Nathan said April 12, 2010:

Nathan: The point is to lower the barrier of entry to Sass for people who do like the CSS syntax. There are a large number of people who want to use Sass, but don’t want to learn a new syntax, and SCSS supports those people. But the indented syntax isn’t going anywhere; if that’s what you prefer, by all means keep using it.

Rick said April 14, 2010:

@Nicolas LESS is also under active development. The next version (currently called less.js) is a complete rewrite of LESS in javascript, which means you can either convert LESS to CSS on the server side, as you would have with 1.0, or serve raw LESS to the browser and do the conversion on the client-side instead.

less.js adds some features too, like more color operations and a clone of SASS’s ampersand (&) selector.

George Moschovitis said April 28, 2010:

The new syntax is much better!!!

Andrej P. Sysoev said May 03, 2010:

Me personally, I like SASS and Python as well. But I don’t want that we have a holy war between those who likes SASS and those who does SCSS. It seems that both are called-for. So there seems to be a need to support the both. And they should step leg and leg with no difference in expression power, being translatable into one another with one-to-one correspondence, having all the difference just in syntax.

By the way, the difference between CSS on the one hand and SASS, SCSS, LESS on the other have much in common with difference between some plain assembly language and macro-assembler. Mixins are nothing else but macros per se. So all the CSS extensions can for instance be tagged with the name MacroCSS or smth like that.

Another idea, may be bad one, to call them MASS :)—Macro Assembly languages for Style Sheets.

Or on the contrary—uCSS (microCSS), having in mind 1) back reference to “macro” as opposed to “micro” 2) another back reference to processor’s microinstructions that are in fact hardware macros, and 3) reference to the fact that they havily reduce source code or support time at least.

Nathan, thank you for your work! keep on!

Next year I hope to be able to attend a course on developpment of Eclipse plugins, and I hope to write a plugin for SASS and SCSS.

Andrej P. Sysoev said May 03, 2010:

Of course, CSS is a declarative assembler, not an imperative one. So are MASS, but macro-ones.

Make your comments snazzy with Textile!