Aentos Blog

Thoughts about the new syntax in SASS3 (.scss)

SASS3 is out since a couple of months right now and I have been using it the last days. There are a lot of changes in SASS3 (see changelog), but the most sifgnifcant one for me it´s the new syntax. It is known as SCSS (Sassy CSS).

It´s a big step that the guys of SASS have done towards an approachable syntax for those new to this metalanguage. SCSS it´s based on the CSS3 spec, and is therefore 100% CSS3-compatible.

What do I do know? I want to use the Sassy CSS syntax:

If you want to start a new project just start to use the new syntax. Your files have to end with .scss and there you go.

If you have want to start a new project but reuse some code, mixins, etc. You can import the SASS files with common @import command into a scss file.

If you want to refactor an old project you can use the new sass-convert command-line tool (out of the sass documentation)

# Convert a Sass file to SCSS

$ sass-convert style.sass style.scss

Note that if you’re converting a Sass file written for Sass 2, you should use the —from sass2 flag. For example:

# Convert a Sass file to SCSS 

$ sass-convert —from sass2 style.sass style.scss

# Convert all Sass files to SCSS

$ sass-convert —recursive —in-place —from sass2 —to scss stylesheets/

In another post I will explain other new features and changes of the new SASS3 release.

By the way if you are Compass lover like me, you can already use the new syntax.