Why Sass is sassy and cute

In case you were wondering

Very Sassy indeed

Sass is CSS extension or meta-language: it helps where CSS lacks. It comes with a few extra features and tools that work on top of CSS. Apart from that, it’s pretty loyal to the CSS syntax.

As we know CSS consists of a series of selectors that group rules that are then applied to whatever those selectors refer to. Sass extends CSS by providing mechanisms only available in more traditional programming languages, but not in CSS3 itself, such as creating variables.

When Sass is interpreted, it creates blocks of CSS rules for the selectors defined in the Sass file. The Sass interpreter literally translates it into CSS. Alternatively, Sass monitors the a Sass file and translate it to output a CSS file whenever the .sass or .scss file is saved.

Sass vs SCSS

Sass has two different syntaxes. Below you can see .sass, .scss and .css files respectively. They really don’t look that different.

http://blog.sterlingw.com/getting-started-with-sass/

The most popular between the two syntaxes is SCSS (or Sassy CSS, extension .scss) where any CSS3 stylesheet is valid SCSS too. Stylistically it looks pretty much the same as classic CSS.

The other, older type is known as indented syntax (extension .sass). The main difference is that the lack of curly braces and semicolons. Blocks are instead specified through the indentation.

Six reasons why you should try it

1. It’s compatible with all CSS versions.
2. It has more features than any other extension, and it’s regularly updated so that it’s ahead of the game
3. It’s 13 years old. Not a baby anymore.
4. It’s trusted by many companies, and it’s the main CSS extension.
5. It has a large community of supporters, including many companies.
6. Many frameworks are build with Sass, such as Compass, Bourbon and Susy.

The only thing you need to do before you can use Sass is installing it.

Preprocessing

Stylesheets can be really large and complex, and as a consequence also harder to maintain. That’s why a preprocessor like Sass can be massively useful to clean things up. Imagine being able to define and assign variables, use nesting and inheritance.

The way Sass works though is not directly on the browser. Browsers do not understand Sass syntax, so a stylesheet written in Sass needs to be translated (or compiled) into CSS before the browser can read it.

The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the sass command. You'll need to tell Sass which file to build the CSS from, and where to output it to. If from the terminal you run sass input.scss output.css it would take the input.scss file and compile it to output.css.

You can also use the --watch flag to watch individual files or directories . The watch flag makes Sass watch the files you want for changes, and it re-compiles CSS each time you save your Sass file. So in that case you can just add the watch flag to your command:

sass --watch input.scss output.css

The same thing could be done if you wanted to be watching a whole directory: in this case you would be using folder paths as your input and output, and separate them with a colon.

sass --watch app/sass:public/stylesheets

Sass would watch all the files inside the app/sass directory for changes, and compile CSS to files in the public/stylesheets folder.

Sass features

Variables

This is one of those things that once you realise they exist you wonder how no one had thought of doing it before. You can store colours, fonts, or any other property value you think you’ll might reuse. To declare and assign a variable in Sass you just need to start with the $ symbol followed by the variable name, colon, and the value you want to store.

.scss

$font-stack:  100% Helvetica, sans-serif;
$primary-color: #ffcc00;
body {
  font: $font-stack;
  color: $primary-color;
}

.css

body {
  font: 100% Helvetica, sans-serif;
  color: #ffcc00;
}

When the Sass file is processed the variable names are replaced by the value we stored in those variables, which can be useful to avoid mistakes when repeating custom colour codes throughout a stylesheet.

Nesting

Unlike other languages, classic CSS doesn’t require any nesting. With Sass instead you can nest your selectors the same way you would nest elements in your HTML. The trick here is to use it in moderation. Over nesting will be confusing and hard to maintain, which is why it should be avoided.

.scss

nav {
   ul {
     margin: 0;
     padding: 0;
     list-style: upper-roman;
   }
   li { display: inline-block; }
   a {
     display: block;
     padding: 3px 6px;
   }
}

.css

nav ul {
  margin: 0;
  padding: 0;
  list-style: upper-roman;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 3px 6px;
}

Personally the nesting makes it more readable. We can clearly see what’s going on and which properties are shared by which selectors.

Modules

Your Sass can be split up and then put back together through the @use rule. @use loads another Sass file as a module, and in doing so you will be able to refer to all of its variables, mixins and functions in your Sass file.

.scss

// _first.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #ffcc00;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'first';
.inverse {
  background-color: first.$primary-color;
  color: white;
}

.css

body {
  font: 100% Helvetica, sans-serif;
  color: #ffcc00;
}
.inverse {
  background-color: #ffcc00;
  color: white;
}

When importing, you can do @use 'first'; without including the file extension.

N.B.

The equivalent is also available in CSS (@import), but in practice they are very different. Each import statement used in CSS causes an HTTP request to be made to the server. For each file import there will be another request.

This increase in the number of resources requested can negatively affect the performance of a web page. Sass does not do that: instead it takes the file that you want to import, combines it with the file you’re importing it into, and then send a single CSS file to the web browser. This does not affect the performance.

Partials

With Sass you can also create partial files where you can keep snippets of code that will be reutilised in other files, which improves maintainability. A partial’s name will begin with an underscore (e.g. _partial.scss). The underscore tells Sass that the file is not itself a stylesheet but only a partial, and shouldn’t be translated into a CSS file. Partials hey can be used elsewhere with the @use rule (the use of the@import rule is discouraged).

Mixins

A mixin lets you make a bunch of CSS declarations that you will be reused throughout your project. And you can pass them arguments. Hallelu!

To create a mixin you use the @mixin directive and give it a name, and give it all the properties you want. You can then use it as a CSS declaration starting with @include followed by the name of the chosen mixin.

.scss

@mixin box($height, $width, $backgroundColor) {
  height: $height;
  width: $width;
  background-color: $backgroundColor;
  margin-bottom: 5px;
  border: 1px solid black;
}
.container { @include box(30px, 40px, #ffcc00); }

.css

.container {
  height: 30px;
  width: 40px;
  background-color: #ffcc00;
  margin-bottom: 5px;
  border: 1px solid black;
}

Extend/Inheritance

By using @extend you can share a set of properties with multiple selectors, and by doing so you can avoid repetitions.

.scss

.main {
   color: red; 
} 
.last {   
   @extend .main; 
}

.css

.main, .last {   color: red; }

Voilà! Enjoy.