Getting Started with SASS CSS

SASS aka Syntactically Awesome Stylesheets is a CSS preprocessor which could make your complex and hard to maintain CSS code into easily manageable and easier CSS code. SASS has features like variables, nesting, mixins and others that might save you in the long run when using CSS.

How it works?

When working with SASS, all the SASS code is placed inside of a .sass/.scss file. Which then when compiled will output the .css file for the corresponding SASS/SCSS code.

There are two syntax variant available. SASS and SCSS.

SASS known as the indented syntax or just "Sass"

  • Uses newline to detect new property definition rather than using semicolon.
  • Uses indentation as a way for identifying nested blocks rather than using curly braces.

SCSS known as "Sassy CSS", which is also used in the following examples.

  • SCSS is an extension of CSS3. Any valid CSS3 can be a SCSS stylesheet
  • It also includes vendor-specific syntax.

Below are the various features that SASS provides. If you are about to create a project using SASS, it’s better to use the SCSS syntax.

Use sassmeister to compile your code and view the CSS output.

Variables

Variables are a way for you to store any valid CSS value and use them later in many places. This way it will be easier to maintain most of the sites color, font, size and other values in one place and also it will be easier to modify it later.

Syntax

To create a variable use the $ sign.

$variable-name: valid-css-value;

Example

// SCSS

$font-family: verdana, Helvetica, sans-serif;
$button-color: #333;

.body {
  font-family: $font-family;
}

.btn {
  background-color: $button-color;
}

// CSS - Output

.body {
  font-family: verdana, Helvetica, sans-serif;
}

.btn {
  background-color: #333;
}

The above code shows how the variables are replaced with their values in the CSS Output

Nesting

Nesting can be used to creating a structure in way the CSS selectors are created. For example, ul li a is where a is nested inside of li and li itself is nested inside of the ul. It follows the HTML structure. With nesting it would be easy to visualize the structure and code accordingly.

Nesting
Nesting

The above image shows how nesting comines the selector of the nested one and creates a new selector styles. Try not to nest too much and keep things simple.

Example

// SCSS

ul {
  list-style: none;
  padding: 5px;
  margin: 0;
  
  li {
    float: left;
    padding-left: 5px;
    
    a {
      color: #333;
    }
  }
}

// CSS output

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

ul li {
  float: left;
  padding-left: 5px;
}

ul li a {
  color: #333;
}

Partials and Import

Partial

In Sass you can create partial files that has a particular set of CSS styles that you want to include in other SCSS files. By this way we can create modular CSS code.

To create a Partial file simply use _ in front of the file name. This way Sass knows that it is a partial file and includes the contents of that file. To include a partial file into another file you can use @import

Import

Import is used to include the Sass files in one another particular Sass file. By doing so it will include the contents of the including file into the included file. It combines the contents of the files into a single file i.e the included file.

It is not necessary to include the .scss extension when importing. For including partial files we use the same @import, but without the _ of the filename. Sass is smart enough to identify that a file is partial file. You can also import other Sass files using @import.

Partials
Partials

Example

// SCSS files
// save this in "_utility.scss"

.clearfix {
  clear: both;
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
}

.fix-pm {
  padding: 0 !important;
  margin: 0 !important;
}

// "main.scss"

@import 'utility';

.body {
  font-family: verdana, Helvetica, sans-serif;
  font-size: 12px;
}

.container {
  max-width: 980px;
  margin: 0px auto;
  padding: 0 5px;
}

// CSS Output
// main.css
.clearfix {
  clear: both;
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
}

.fix-pm {
  padding: 0 !important;
  margin: 0 !important;
}

.body {
  font-family: verdana, Helvetica, sans-serif;
  font-size: 12px;
}

.container {
  max-width: 980px;
  margin: 0px auto;
  padding: 0 5px;
}

Mixins

It is sometimes hard to write a group of CSS declarations again and again for a specific task, say for creating border-radius for different vendors specific browsers. We need to specify it for IE, Firefox and Chrome. This process can be made easy by using mixins. Mixins are a way to create group of CSS declarations together that can be included in any part of the program. It can also accept values that should be set to the CSS properties. It is more or less like a function in other programming language.

Syntax

// Mixin Declaration
@mixin mixin-name($values) { // Similar to - function mixin-name(params) {
  // Body of mixin with some css declaration
}

// Mixin Usage
.including-selector {
  @include mixin-name(value); // Similar to - mixin-name(value);
}

Example

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

.container {
  // This will include a set of css declartions with 5px border-radius set.
  @include border-radius(5px);
}

// CSS Output
.container {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Extend/Inheritance

Extend can be considered as a way to reuse styles that has been already defined in a selector. All the CSS declaration of the Extended selector will be included in the Extending selector. It is similar to Inheritance, where the Child has all the properties of the Parent.

Syntax

.parent {
  // Some styles
}

.child {
  @extend .parent; // will include all the styles the .parent selector has defined.
}

Example

// SCSS code
.modal {
  padding: 5px;
  border-radius: 3px;
  background-color: white;
}

.modal-top-right {
  @extend .modal;
  top: 0;
  right: 0;
}

.modal-top-left {
  @extend .modal;
  top: 0;
  left: 0;
}

// CSS Output
.modal, .modal-top-right, .modal-top-left {
  padding: 5px;
  border-radius: 3px;
  background-color: white;
}

.modal-top-right {
  top: 0;
  right: 0;
}

.modal-top-left {
  top: 0;
  left: 0;
}

Operators

Finally with SASS you can do operations such as adding, subtracting and other mathematical operations. What is so awesome about this is that it can be performed with values having CSS units. For example, you could add two values in px and assign it to a CSS property .padding: 2px + 5px.

Example

// SCSS

.container {
  padding: 2px + 3px;
  width: 600px / 960px * 100%;
  margin: 2 * 5px;
}

// CSS Output

.container {
  padding: 5px;
  width: 62.5%;
  margin: 10px;
}

LESS is a similar CSS preprocessor which you should check out.