Sass - Setup Development Environment

In the previous chapter, you learned about Sass and its transpiler. Here, you will learn to set up development environment for Sass.

System Requirements for Sass

• Operating system - Sass is platform independent
• Browser support - Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
• Programming language - Sass is based on Ruby

Official Sass Web Site

Read more about Sass at the official Sass web site: https://sass-lang.com/

Installing Ruby

To install Ruby, download and run the latest stable version of Ruby installer for Windows from rubyinstaller.org. As part of the installation, the installer will add a "Start Command Prompt with Ruby" shortcut to your start menu. (You'll find it in the Ruby folder.)

Installing Sass

To install the Sass transpiler, open a command window. On Windows, use the "Start Command Prompt with Ruby" shortcut. On a Mac, use the Terminal program. (You'll find it in the Utilities folder.)

Open your command window and execute the following command:

gem install sass

On Windows, you might get a confirmation dialog. Just say yes.

On either system, depending on your security settings, you might get an error message. If that happens, try this command instead:

sudo gem install sass

Testing Sass

To check SASS is install or not on your system. Run command

sass -v

After a moment or two, you should see the version of Sass installed on your system (that's what the -v switch means)

Let's create a new test file named test.scss (The .scss extension is one of two file extensions used for Sass files.

Write the following code in created file test.scss and save the file.

$primary : #434433;

html {
text-color: $primary;
}

And go back to your command window, make sure you're in the folder where you created the file, and run the following command:

sass test.scss test.css

After, The Sass transpiler will create the test.css file. If you open it in your editor, it should look like this:

html {
text-color: $primary;
}

Congratulations! You've just written your first piece of Sass code and transpiled it into CSS.

Sass Syntax

Sass supports two different syntaxes. Each one can load the other, so it's up to you and your team which one to choose.

The Sass supports two different file types: .sass and .scss - each with its own extension and syntax. Prior to version 3, Sass files used the .sass extension, and used an indented syntax similar to haml. In version 3, Sass introduced the .scss format ("Sassy CSS"), which is much closer to CSS proper.

SCSS Syntax

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

SCSS looks like this:

The Indented Syntax

The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document

In general, any time you’d write curly braces in CSS or SCSS, you can just indent one level deeper in the indented syntax. And any time a line ends, that counts as a semicolon. There are also a few additional differences in the indented syntax that are noted throughout the reference

The indented syntax looks like this