📖 SASS

Using CSS for sites has it's limitations. Using selectors repeatedly in your CSS code can be confusing. Sass allows us to use codding techniques similar to other scripting languages including nesting, variables, mixins and other techniques.

Getting Started

Sass is a preprocessor tool that makes coding CSS with variables, nesting and mixins possible. While there is growing support for variables and nesting currently in CSS, there is limited browser support.

Reference the Sass docs for help getting started installing and learning how to use Sass.

Install Sass

You might first check to see if Sass is already installed on your machine by opening the command line (terminal) and typing in sass --version. If the version returns, Sass is ready to go. If not, follow the next procedure to get it installed.

While there are a few options for installing Sass, I recommend using the command line and npm (node package manager) to install Sass on your computer. NPM can be installed on your computer using the same command line terminal. To check your system for Node, type node --version. It should return a version number. If not, you need to install Node.js.

Once Node.js is installed, type the following into the command line.

npm install -g sass

This is normally a fast process (depending on your connection). When finished, make sure the install was completed correctly by checking the version of Sass by typing in sass --version.

Now that you have Sass installed, you can run the Sass compiler using the command line interface (CLI). Just open a command line and type the following.

sass style.scss style.css

The above line shows the initial sass call then the name of the source (scss) file to the name of the target (css) file. You might also see a new map file appear in your site files. This is for the Sass compiler to track the changes to the new css output file. If you delete it, a new one will be created the next time you run the sass command.

This process is really cool, but will quickly become tedious, always having to run the compiler every time you change a css rule. You might want to turn on sass watch to have Sass recompile automatically on new saved changes. Use this command to turn on watch.

sass --watch input.scss output.css

You can also include the path names for files that locate in different directories.

sass --watch app/sass:public/stylesheets

The above code shows the watch file name separated by a colon (:) to the new file name. Sass will find all the files in the app/sass directory and put the compiled files into the public/stylesheet directory.

To stop the Sass watch type Ctrl+C into the command line or delete the command line session.

Using Sass Features

Getting help on using Sass is a good way to start with it. The Sass Basics guide can help you through the process.

Variables

Like other programming languages, variables are used as containers to hold values that are sued throughout the code. It is beneficial to use a variable if you want to use the same value in many places thereby simplifying the update process should you decide to change the value at some later date. Consider the following code that uses a variable to hold a color value so the variable can be assigned to the element using the color.

Example
$font: Helvetica, sans-serif;
$primary-bg-color: cornsilk;
$accent-color1: lightblue;

body {
    font: 100% $font;
    background-color: $primary-bg-color;
}

This code uses a variable for the font and one for the primary background color, assigns values to the variables and then assigns the variables to style elements. Notice that the variable names are preceded with a dollar ($) sign.

Using variables in CSS is another great coding method for extending your CSS approach and minimizing your code. So much so that it is now used in most browsers.

Nesting

Nesting is also a common practice in other coding languages. It allows the code to be formatted in a way that makes more sense than the repeating patterns of standard CSS. Consider a list of links that are in a <nav> menu on a page. If we wanted to apply styles, we might need to add rules for the <nav> element, the <ol> element, the <li> element and the <a> element. Each of these are nested inside the other in the HTML, but in a traditional CSS, we would list each of them as child elements.

CSS Child Example
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

With nesting, we can nest each element within its parent. This is more intuitive than all the child elements listed separate.

Nesting is such a desirable option that it is now included in many modern browsers and does not need to be compiled. At the time of this writing, CSS nesting has not become widespread enough to use it on enterprise sites as the browser support is still limited.

Scss Nested Example
nav {
    background-color: lightblue;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
Mixins

These are used when you have a block of CSS rules you want to apply throughout your style sheet. You begin by creating the mixin with a directive that defines the rules for the mixin that can be applied to additional elements. Once the mixin is created, you can apply its rules by using the @include followed by the mixin name.

Example
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

In the mixin above, we used a variable to pass the color for the theme into the mixin. In doing so, we can now pass a different color to the same set of rules.

Native CSS Selectors

CSS is a growing standard and many of the methods learned from Sass are desirable for web designers and developers to improve coding. There have been several attempts to mainstream these approaches into the CSS standards and get native browser support. For now, the CSS community continues to explore the alternatives and discuss the different approaches in hopes of bringing to the community a stable and useful solution. You can find a myriad of creative approaches on the web.