Section 2: Basic Sass

Before digging into the special parts of Sass and it's SCSS syntax, we should quickly cover how exactly they relate to CSS. After all, its valid CSS that we want when it really comes down to it. Keep this in mind as we work through the how-to: All CSS is valid SCSS! That's right, because you already know CSS, you know SCSS (kinda)!

As a quick example, check out the following code. On the left you'll see a file called demo1.scss, and on the right you'll see the result when you compile that using the Sass compiler (demo1.css):

/* CSS is valid SCSS! */
// selecting by element name
div {
  background-color: green;
}

// selecting by class name
.some-class {
  font-family: consolas;
}

// selecting by id
#a-cool-id {
  border-radius: 15%;
}

/* CSS is valid SCSS! */
div {
  background-color: green;
}

.some-class {
  font-family: consolas;
}

#a-cool-id {
  border-radius: 15%;
}

As you can see, when you run valid CSS through the Sass compiler, you get the same output, indicating that CSS is valid SCSS. As you should also have noticed, comments in SCSS are the same as those in CSS.

// this is an example of a valid single line comment

/* This is an example of a valid
multi-line comment */

What you may not have noticed though, is the way that the Sass compiler handles comments. Multi-line comments are included in the compiled CSS files whenver possible, and single line comments are excluded. If you want a comment to appear in the results of compilation, you should include it as a multi-line comment, whereas if you want a comment to remain only in your .scss source file you should make it a single line comment.
Now that you've got the hang of some very basic stuff, lets move onto to some more useful syntax.

Introdution

In this section we're going to look at how you can save information in variables, how you can build expressions using operators, and how you can nest your SCSS. Before digging into the details lets look at some code:

Variables & Comments

// set up some easy to remember variables
$sass-color: #CF649A;
$font-stack: Cambria, Arial, Verdana;
$main-width: 500px;

// use the variables
.sass-emphasis-text {
  color: $sass-color;
  font-family: $font-stack;
}

#main-container {
  width: $main-width;
}

.sass-emphasis-text {
  color: #CF649A;
  font-family: Cambria, Arial, Verdana;
}

#main-container {
  width: 500px;
}

So what exactly is going on in the code above? If you look at lines 2-4 of demo2.scss, you'll notice 4 variable definitions. Variables in Sass are declared using the syntax $variable-name, and can be used anywhere their value could normally be used. In this case, $sass-color and $font-stack are used in the definition of the .sass-emphasis-text style and $main-width is used while styling #main-container.

The benefit of using variables is that you can change the value of the variable in one place in your stylesheet and affect the styles of any rules using that variable. This makes maintaining your stylesheets much easier!

Its worth noting at this point that Sass has seven primary data types that you can assign to variables:

Numbers

Any valid number, either with or without a decimal. Can be hex, or decimal and can be followed by valid CSS units like %, em, px, etc...

Strings

Any unquoted or quoted string containing valid string characters.

Colors

Any valid CSS type representation of color (hex, rgb(#, #, #), etc...).

Boolean

True / False

null

the only non-value value

Lists

Lists function similarly to arrays in other programming languages. They can be stored with commas or spaces as separators. It is possible to store 2D lists (or greater numbers of dimensions) as long as you make the dimensions explicit with your separators and parentheses where necessary.

Maps

Maps use key: value pairs. An example definition would look like

$some-map: ( key1: value1, key2: value2);

Nesting & Operators

First some code:

// set up some easy to remember variables
$sass-color: #CF649A;
$font-stack: Cambria, Arial, Verdana;
$main-width: 500px;

// nest some selectors
.outside-div {

  background: {
    img: url("www.somewebsite.com/kitten.jpg");
    position: center;
    repeat: space;
  }

  h3.emphasis {
    color: $sass-color;
  }

  button {
    display: block;
    width: $main-width / 10;

    &:disabled {
      background-color: red;
    }
  }
}

.outside-div {
  background-img: url("www.somewebsite.com/kitten.jpg");
  background-position: center;
  background-repeat: space;
}
.outside-div h3.emphasis {
  color: #CF649A;
}
.outside-div button {
  display: block;
  width: 50px;
}
.outside-div button:disabled {
  background-color: red;
}

The first thing we should examine in the above code is the way that selectors are nested below other selectors. Normal CSS falls flat on its face when it comes to matching the format and structure of an HTML document, but Sass allows you to write code that more closely matches what you'd find in your HTML document, and intelligently outputs CSS that is qualified enough to apply the syles correctly.

Now consider whats going on in lines 9-13 of demo3.scss and compare them with their output on lines 1-5 of demo3.css. As we've mentioned before, Sass attempts to help you as the developer keep your style sheets DRY (Dont Repeat Yourself). Instead of having to type out background-something, The sass compiler will append word before the colon (:) to the words in the brackets using a dash. Less typing!!

Next, lets consider line 21:

width: $main-width / 10;

If you look at the resulting width on line 11 of demo3.css, you'll notice that the compiler has divided the value of $main-width by 10 and output that value. Sass supports a wide variety of operators like * / + - % == != and for numbers that can be compared to each other, also supports the relational operators < > <= >=.

Finally, we'll consider line 32 of demo3.scss:

&:disabled { ...

The & operator provides a handy way to tell the Sass compiler, "Reference the parent selector." As you can see by line 13 of demo3.scss, the compiler generated a selector that sets the background color of a disabled button that follows an element with the .outside-div class to red.

You may be asking yourself at this point, "How can I start using this on my own system? I do have Sass installed after all!" This is a great question and in the following examples, You'll see a few of the most basic ways to compile and manage .scss files on your local system. If you have any problems running these, please head back to the setup page and ensure you've got Sass properly installed.

# compile a .scss file to a .css file in the current directory
$ sass inputFile.scss outputFile.scss

# Watch a file and automatically compile when changes occur
$ sass --watch fileToWatch.scss:outputFile.css

# watch an entire directory and compile any file into a different directory when changes occur
$ sass --watch /path/to/input/directory/:/path/to/output/directory/

# access the Sass interactive shell where you can type valid SCSS and see what its output will be
$ sass -i

# convert an .scss file to a .sass file (the old Sass syntex)
$ sass-convert newStyle.scss oldStyle.sass

At this point, you should be able to do the following:

• Create and compile .scss files on your own system.
• Write your files with comments that persist in the compiled files and comments that remain only in the .scss files
• Simplify stylesheet maintenance by using variables to represent data that is common to multiple rulesets in your stylesheet.
• Nest your SCSS to more closely match your html document structure.
• Use operators to perform calculations on the various Sass data types.

Congratulations! At this point you can begin to use Sass in your own workflow and even with this basic knowledge, you should see increased productivity. In the next section we'll dive deeper and look at partials, the @extend operator, @mixins and @functions.