Getting ready

For this recipe, you will need only a text editor and the Ruby Sass gem installed. In the Installing Sass for command line usage recipe of this chapter, you can read about how to install the Ruby Sass gem.

How to do it...

Use the following steps to learn how to convert SCSS code into the indented Sass syntax and find out that both syntaxes compile in exactly the same CSS code:

How it works...

Currently, two syntaxes are available to write Sass: the original indented syntax, mostly called Sass, and also the newer Sassy CSS (SCSS) syntax, which is an extension of CSS3.

When running the sass test.sass and the sass test.scss commands, the compiler uses the file extension to decide which syntax should be used. In your project, you can import partials in either syntax without any problem. Again, the compiler knows what to compile based on the file's extension. In the Working with partials recipe of this chapter, partials are discussed in more detail.

The sass-convert command-line tool used in this recipe ships with the Ruby Sass gem. After installing the gem, you can directly run the sass-convert command. This command looks at the file extensions too; .sass is converted into .scss or vice versa.

There's more...

As you already know, Sass has been written in Ruby. Ruby is the programming language. You can also use Ruby with Ruby on Rails. Ruby on rails is the Ruby framework for creating web apps. Ruby uses both Sass and HAML. HAML is a markup language used to clearly and simply describe the HTML of any web document without the use of inline code. HAML is a template system for HTML that tries to avoid repetition of code and unnecessary characters by relying on indentation and not the text to determine where the elements and blocks of code begin and end.

The original Sass syntax used the same method of declaration and coding that Ruby does and relies on indentation, as HAML does. This syntax is an excellent fit in Ruby (on rails) and feels already familiar for Ruby developers.

The newer SCSS focuses on the proposal of Sass in being an extension of CSS. Not only does SCSS look like CSS, but any valid CSS code is valid SCSS code too. Because this book is not only intended for Ruby developers, but for anyone who wants to learn Sass, this book uses the newer SCSS syntax for Sass.

See also