Writing Sass or SCSS

Attentive readers have possibly already noticed that the SCSS code has been used to write Sass code. SCSS is the newer and more CSS-like syntax for Sass. This book uses SCSS code in lieu of the older indented Sass syntax. In this recipe, you will learn the differences between the Sass and SCSS syntaxes and why this book prefers SCSS.

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:

1. Use your text editor to create a simple SCSS file called test.scss. This file should contain the following SCSS code:

   $color: orange;
   
   p {
    color: $color;
   }

2. Then, run the following command in your console:

   sass-convert test.scss test.sass
   

3. The command from the previous step will create a new file named test.sass. Now, open the test.sass file with your text editor and you will find that its content looks as follows:

   $color: orange
   
   p
     color: $color

4. Now, you can run both the sass test.sass and the sass test.scss commands in your console. Both will give the following output:

   p {
     color: orange; }

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

• In the Playing on SassMeister recipe of Chapter 2, Debugging your code, you can read about online test environments for Sass. Also, SassMeister has an option of switching easily between the SCSS and Sass syntaxes.
• You can read more about HAML at http://haml.info/.
• In Chapter 2, Debugging your code, you can read about how to use Sass with Ruby on rails.
• Visit http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html if you want to learn more about the indented syntax.