Getting started with Sass/SCSS

How to get start and integrate Sass/SCSS with your personal, business website and blogs.

February 11, 2017 - 9 minute read -
code tutorial

Introduction

As a website designer we all love working with CSS and have designed pretty websites, but over the time when stylesheets gets its become very complex, and harder to maintain. This is where we want to have a magic CSS band so we can just use it and can make CSS more maintainable. Yo!! I think we just got one here which is Sass. Sass is a pre-processor and it lets you use features that don’t exist in CSS yet like variables, nesting, partials, mixins, inheritance, operators and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, you will feel working with sass is very fun and interesting. [Note: sass/scss file cannot used directly into html file, you have to process them into css files.]

Prerequisites

  • Install node and npm(node package manageer) - npm is the package manager for JavaScript. We will be using this for managing development packages of our Sass project.

    → Node installation on different OS

  • Install Gulp - gulp help automate development workflows. We will be using this automate our build process. Open terminal and type:

    $ npm install gulp-cli -g

    This will install gulp globally on your local system.

Personal website

Lets get down to actual business. For tutorial purpose we will taking below website design and will build it using html/sass.

preview-mockup

(Source - https://dribbble.com/shots/3282836-Personal-website-redesign)

  • Create folder of your html-sass project. Open terminal/shell/command-prompt whatever is applicable in your case and type: (Note: I’ll be using terminal in this tutorial.)

    $ mkdir html-sass
$ cd html-sass
$ npm init

    After executing npm init you will be prompt for interactive terminal where you can mention details about your project like project name, version, description etc. If You want then you can input details accordingly or can continue hitting enter end and can update it later.

  • Create main file for our layout which is index.html and write initial boilerplate code in it. Now you index.html will be looking something like below:

  • Now lets get started with adding components to our html page. Looks like we have three main components in our design which is
    • header,
    • main content
    • and footer.

    Lets update our html page accordingly.

  • Lets setup development environment for sass. For this we required below npm packages:
    • (required) gulp - requirement already matched in prerequisites.
    • (optional) gulp-inject - for automate injection task of generated css files to index.html.
    • (optional) gulp-natural-sort - for injecting file alphabetically in index.html.
    • (required) gulp-sass - for processing sass/scss files and generate css files from it.
    • (optional) gulp-webserver - for running your project in local web-server.
    • (optional) run-sequence - for running gulp task in order.

Okay, now we have listed out all required packages. As you can see there is some packages marked as optional. So, you don’t need to get them but I recommend to use them as they will help you in development and debugging in great extent. For installation visit package url provide above and you will find installation steps. For example, if you want to install gulp-sass then you can do so by firing up terminal and switch to your project directory and then type:

  $ npm install gulp-sass --save-dev

This will add and save gulp-sass as development dependency to package.json. After doing all your package.json file will be looking something like below:

[Note: you can directly copy this will also and type npm install in terminal in your project directory, no need to visit package url page]

  • Next we will be creating folders for sass and css files. Now your project structure should be looking something like below

    • styles.scss - is our main sass file
    • _header.scss - is for header specific styles
    • _main-content.scss - is for main-content styles
    • _footer.scss - is for footer specific styles
    • _variables.scss - is for holding all common variables used in various styles. You must be wondering what is variable, think of variables as a way to store information that you want to reuse throughout your stylesheet.
    • _mixins.scss - think mixins like functions in programming languages, as functions can be reused mixins also.

  • Next we will setup task for generating css files from sass files. For this we will create gulpfile.js which will be used for running various task related to development and generating css files. Your gulpfile.js should be looking something like below:

(Hmmm, again we have some strange looking file. I will explain this too and by the way you can use any file as it is and everything should work.)

Okay, there is lot of things happening in gulpfile.js. Let me try to explain them.

  • Line no 3-8 → We are including require packages for running our html-sass project.
  • Line no 10 → Defining local web server path
  • Line no 12-16 → This task will process sass. Task will take all .scss files from sass folder and convert them to corresponding .css file and put them into css folder.
  • Line no 18-20 → This task is monitoring file changes, as soon as any sass file changes it will generate css file for same.
  • Line no 22-35 → This task injecting generated css files to index.html in between <!-- inject:css --><!-- endinject --> placeholder automatically.
  • Line no 37-44 → This task will run local webserver which will serve our index.html page at http://localhost:8000/index.html
  • Line no 46-56 → There are three tasks default(same as serve), serve and prod.
  • In-case of default no need to mention task name just gulp will run the task while for serve need to type gulp serve in terminal.
  • prod task will process sass and inject corresponding css in index.html but will not run any server.

  • Any task can be run using gulp <task-name> in terminal:

    $ gulp sass

Features in sass

Variables:

Use to store information and started with $ sign. Suppose I want save background-color value to a variable then I can do:

$bg-color: #e6e5e1;

Same way we can create variables for font-size, padding, margin.

  • Variables comes useful when you want to update some information used multiple places e.g. If some font-size used at many places then you don’t need to update them all. You can just update the variable value and value will get updated everywhere automatically.

Nesting

Nesting: sass is indentable e.g. a tag css can be indented inside .inner-content.

.inner-content {
  padding: $default-margin*2 $margin-inner-content; // * operator used
  border: $default-border-size*4 solid $secondary-border-color;
  width: $width-inner-content;
  @include box-shadow(); // mixins used
  color: $primary-color;
  text-align: center;

  // nesting used
  a {
    color: $primary-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

Nesting comes useful in keeping track child and parent relationship css elements as we do in html.

Import

Using import we can use and include functionally from other sass files. e.g.

In styles.scss see how @import is used for imported partials like _header.scss, _main-content.scss and _footer.scss.

Import is very useful, using import we can combine multiple files in one place.

Partials

Multiple file can combine into one e.g. _header.scss is a partials file used in styles.scss. Using partials we can separate sass files according to the features. You will say we can do same in css files also then why sass. Actually while loading css file browser send get request for each and every css files but in case of sass you can just import all partials in single main sass file and then there will be only single http get request see styles.scss for more details.

Mixins

mixins are like functions and can be reused any number of times. Actually mixins follows DRY principle of programming.

e.g. mixin for display-flex()

@mixin display-flex() {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */   
}

Usage of mixins

@import "mixins"; // import mixin file to sass file where you want to use it

ul.main-menu {
  @include display-flex(); // mixin used in main-menu
  margin-left: auto;
  list-style: none;

  li {
    padding-right: $default-padding*2;
  }
}

Inheritance

By the help of inheritance you can inherit and extend style of other css selector and you dont need to write that particular style.

e.g. .item2 style is extended from .item1. Now .item2 is has both .item1 css and its own css.

.item1  {
  position: absolute;
  z-index: 1;     
}     

.item2 {
  @extend .item1; // inheritance used
  background: $secondary-bg-color;
}

Operators

Operators are very useful. You can use operators like +, -, *, /, and % as we use in high-level programming languages. E.g. See * operator used in padding

.inner-content {
  padding: $default-margin*2 $margin-inner-content; // * operator used
}

Final Project

Lets review final code for our sass files:

There is lot happening in _main-content.scss lets take this opportunity and talk about each information in details.

  • From line no 6-7 → We are importing common _variables.scss and _mixins.scss files. For importing a partial file you just need to use @import with file-name you want to import. Ignore _ and .scss from file name, sass will recognize that automatically.

  • From line no 9-10 → We are creating variables specific for main-content only.

  • From line no 14-21 → Custom style for body tag. On line no 15 we have used variables like background: $bg-color; for background color. If you open _variables.scss you will find this variable mentioned there.

  • Next is line no 17 → @include display-flex(), here we have used mixin display-flex. Which we have defined in _mixins.scss (you can find code for mixins in Mixins section of this post).

  • Line no 23-44 → Here we are adding styles for .inner-content element class.

  • Line no 24-29 → Adding different styles for .inner-content like padding, border, width, box-shadow, color and text-align.

  • Line no 32-39 → Here we have nested our a tag inside .inner-content and setting a tag styles like color, text-decoration and hover effects etc.

  • Line no 41-52 → We have nested content section tag inside .inner-content. We have added padding to section tag and added font-size, line-height to .into and .tagline classes.

Same thing we will be doing in rest of files. I will attach file with code here:

styles.scss →

_header.scss →

_footer.scss →

_variables.scss →

We have all files in place, now if you run npm install and then gulp serve in your terminal you should a personal site running at http://localhost:8000/index.html. Your personal site should be looking something like below:

final project

I know it is not what we shown in design image but I think we tried our best and at-least learned some sass.

Enjoy victory!

victory

Summary