SASS

Make CSS easier

As we've been covering Ruby on Rails you may have noticed the files in your app/assets/stylesheets ending in a different file extension. Instead of our typical .css we get .scss!

.scss files are part of a larger piece of software called SASS, or Syntactically Awesome Style Sheets. SASS is something called a CSS Preprocessor.

A preprocessor's job is to take a more advanced syntax of CSS and PROCESS it BEFORE ( hence "pre" ) it is sent to the client as plain old CSS.

Sass Website

SASS vs SCSS

So if the software is called SASS, why are we using files ending in SCSS?

SCSS or Sassy CSS is just the file type that the SASS framework utilizes.

SASS vs SCSS article

Installation

When working with Ruby on Rails, SASS is inherently installed in our Gemfile so there's no need to install anything ourselves.

With Node and other back-end platforms you will typically have to install the SASS package manually.

Cool Stuff SASS gives us

SASS is basically CSS with actual programming aspects incorporated which makes our lives much easier.

Variables

With SASS we can actually utilize variables in our CSS code. These are typically prefaced with the "$" symbol.

$pad: 2em;
$color-primary: rgb(40, 40, 40);
$color-secondary: rgb(40, 170, 220);

body {
  background-color: $color-primary;
}

h1 {
  color: $color-secondary;
}

.container {
  padding: $pad;
}

Which will be processed and converted into CSS like this:

body {
  background-color: #282828;
}

h1 {
  color: #28aadc;
}

.container {
  padding: 2em;
}

Nesting

With Nesting in SASS we can declare inherited styles that would normally make us repeat the parent selector

nav {
  text-align: center;

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

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 5px 10px;
  }
}

Which will turn into this CSS:

nav {
  text-align: center;
}

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

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 5px 10px;
}

Extend

Another useful feature is the ability to extend styles from predefined classes or id's. To do so we'll use the @extend keyword.

// columns
.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

// colours
.blue {
  color: rgb(40, 170, 220);
}

// structure
.primary-content {
  @extend .col-2-3;
}

.secondary-content {
  @extend .col-2-3;
}

// text
p.highlight {
  font-size: 3em;
  @extend .blue;
}

The resulting CSS:

.col-1-3, .secondary-content {
 width: 33.33%;
}

.col-2-3, .primary-content {
 width: 66.66%;
}

.blue, p.highlight {
 color: #28aadc;
}

p.highlight {
 font-size: 3em;
}

Import

A great feature of SASS is the ability to import other stylesheets. This aspect allows us to utilize DRY principles even in our stylesheets!

Note! When you're creating .scss files that you know you'll be importing into a main stylesheet be sure to name them starting with and underscore**

e.g: _navbar.scss

This will tell the SASS preprocessor to not convert those directly to CSS but instead pull them into a main file and then convert everything there into CSS.

@import 'reset';
@import 'grid';
@import 'text';

body {
}

h1 {
}

Mixins

Mixins are an extremely powerful feature of SASS. Basically they allow us to define a function and pass parameters to that function in order to output a result. Typically this can be used to make a shortcut for extraneous CSS rules.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

And the CSS that comes from that:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Bootstrap

You know what is written in SASS? Bootstrap! That means that install the original source files for bootstrap we can easily override the default styles options by changing the values of the SASS variables used.

In Rails this is even easier because we can install it using the Bootstrap-SASS Gem

Once installed you can simply change values like so

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";