Tutorial

How to get started with Sass or SCSS – Part I

Sass (Syntactically Awesome Style-sheets) is basically a scripting language that is compiled or interpreted as CSS (Cascading Style-sheets). As per official Sass website it is a CSS extension language or CSS with super powers.

Introduction

I have compiled this small tutorial or how-to guide for people with some basic understanding of web development. And I am assuming that most of the readers of this guide are already familiar with terms like web designing or development, HTML, XHTML, HTML5, CSS, etc. And they already know the importance of CSS for creating awesome looking web pages and web applications.

Why we need Sass

Long gone are the days when web applications were built to run on computer screens of standard size and resolution. Introduction of smart phones have totally changed the dynamics of web designing and development. Web applications with non-responsive design, or a design that remain same irrespective of screen size of device on which it has been accessed or viewed, are now considered obsolete.

CSS is static by nature and it’s use. Although, you can still design a good looking responsive web page yourself using simple CSS. But, it will take a little bit of extra time and effort. Sass helps you to fill that gap by providing you a way to write CSS that will change as per your pre-define rules and conditions.

Responsive web designs have also opened the way for various different CSS frameworks like Bootstrap, Materialize, Compass, etc. All of these frameworks are great and preferred by many web developers for different projects using different technology stacks.

But as a web developer, irrespective popularity of these frameworks and the ease of using these for responsive web development, we still needed a way to come up with our own style and layout, or a way to extend or change something in a framework at any given time. This is where Sass come into picture again; As it help you to modify and extend almost all of these CSS frameworks according to your requirements.

Difference between Sass and SCSS

There is no such difference between these two except coding/writing syntax. Sass itself is a scripting language and it support two different syntaxes. We usually refer the old indented syntax as Sass and the other easiest or CSS similar syntax as SCSS. I will use SCSS syntax for all of my Sass related tutorials and guides. It’s on up to you which one you prefer for your projects.

SCSS

SCSS based syntax use curly brackets for group logic and semi-colons for line breaks. A sample code might look like this. If you have used and worked with CSS before it will be a lot easier to understand and use for you in future.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

Sass or Indented Syntax

Default indented syntax of Sass would me more familiar to people with ruby and python background. Because, it don’t use semi-colons and curly brackets like SCSS. Here is a sample code in Sass syntax.

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
    font: 100% $font-stack
    color: $primary-color

Now let’s discuss how you can start working with Sass.

Installation

Although, you can continue reading this tutorial without installing and setting up Sass on your computer or development machine. But, I have always preferred learning by practice, that’s why I would recommend same to you as well. You should never hesitate to get your hands dirty to learn something new. Because, your mind remember and store actions much longer in your memory as compare to just reading or browsing.

There are two ways to install Sass on your system.

  1. One click install.
  2. DIY or command line.

Whether you are here just for learning and want to give Sass a try or you are a professional who want to get started with it so that you can use it in future. I would recommend you DIY method. Although, one click install methods are quick and sometime provide some extra features. You can find some recommended one click installers here on Sass official website.

But, DIY will again help you to learn better. So let’s install it ourselves.

Standalone install

To install Sass as standalone application and without any external dependency, you will have to download Sass package as .zip or .tar from official GitHub account and add it to your path. Here is how you can add a package or executable to path of your OS.

Install on any machine and OS with node.js and npm

If you are familiar with node.js and you have already installed and setup node.js on your machine. You can simply install it by running a npm command.

> npm install -g sass

Using -g in your command will install sass as a global package and you can use it with any project or directory in your system in future. But, if you don’t want to install it globally and you have already created a practice project or directory for this. You can skip -g from above command.

Install on Mac OS

If you own a Mac or Linux machine and you are familiar with Homebrew package manager, which is de-facto package manager for Mac and preferred by many for Linux, you can install Sass running a command like this.

> brew install sass/sass/sass

Install on Windows

And if you own a Windows machine and you don’t want to use One click install or Standalone install, you can still install Sass on you Windows machine by using Chocolatey package manager.

> choco install sass

How to verify Sass install and check installed version

If you have installed Sass correctly by using any of the above methods and you want to verify if everything has been setup correctly without any issue. You will have to execute a sass command now.

> sass --version

If Sass has been installed successfully than this command will display current version of Sass on your machine. In my case it displayed ‘1.26.5’ which is the latest version available at time of writing this tutorial.

Preprocessing or compiling

As our browser only understand standard CSS, that’s why we can’t use Sass code and files directly in our web application. We will have to process or compile these first, or in other words we will have to convert Sass or SCSS code to browser compatible version of CSS.

You can easily do this using your terminal or shell. Once Sass has been installed on your machine, you can use sass command to compile your Sass to CSS. If you want to see more details about sass command. You can do this by executing this command in your terminal.

> sass --help

It will display complete list of flags or options available for sass command like this.

> sass --help
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

━━━ Input and Output ━━━━━━━━━━━━━━━━━━━
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.
-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]
    --[no-]charset             Emit a @charset or BOM for CSS with non-ASCII characters.
                               (defaults to on)
    --[no-]error-css           When an error occurs, emit a stylesheet describing it.
                               Defaults to true when compiling to a file.
    --update                   Only compile out-of-date stylesheets.

━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)
    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]
    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.
    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to use terminal colors for messages.
    --[no-]unicode             Whether to use Unicode characters for messages.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Sass files are plain text files with .sass or .scss extension, that’s why you can use any text editor or your favorite IDE to work with these files.

Let’s just create a file with any name, e.g. practice.scss, somewhere in your machine and put this code in it and save it.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

Now go to your terminal window and open that directory where you have stored this file. Now type below command and hit enter to execute.

> sass practice.scss practice.css

Congratulations, you have compiled your first Sass file. Now open that directory in your file explorer or run this command in terminal to see list of files.

> ls -lt

If Sass has successfully compiled your file without any issue. You will now see three files in that directory.

practice.css
practice.css.map
practice.scss

Don’t worry about ‘practice.css.map’ and ignore it for now. And just open ‘practice.css’ in text editor or your IDE. You will see some style code like below.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

If you compare it with your source .scss file, you will see that our Sass compiler has removed and replaced some values to generate final output. We will discuss this in detail in our next tutorial. But, for now, you just need to know that we can compile a source .scss or .sass file using sass command and by passing source file and destination file names as command arguments. Sass compiler will look for source file in current directory and store compiled code in destination file.

If you don’t want to execute sass command again and again after making updates to your source file. You can use --watch flag to instruct Sass compiler to watch or monitor your source file for any changes and re-compile your CSS when you save your source Sass file. This is how our previous command will look like with --watch flag.

> sass --watch practice.scss practice.css

And if you are working with multiple files at the same time and you want Sass to watch all files in a directory. You can ask Sass compiler to watch a complete directory. Sass compiler will watch all .scss and .sass files in source directory and output results in destination directory. Here is how that command will look like.

> sass --watch source-directory:destination-directory

When you execute this command Sass compiler will watch ‘source-directory’ for any file changes and output results in ‘destination-directory’. Only difference of executing sass command on directories instead of files is that you will have to use colon ‘:’ instead of space.

I think this should be enough for part one of our ‘Get started with Sass’ tutorial. We will learn more about Sass programming standards and some advance topics in part two of this tutorial.

Please don’t forget to comment your thoughts and suggestions. Also share it with other if you like reading it and it was of any help.

See you soon, Insha-Allah.

Allah Hafiz.

UPDATE: Part two of this tutorial has been published on my website. You can visit and read it here. Thank you.

Image placeholder

Hi! I'm Zeeshan Elahi

I have compiled and prepared this content with love for people like me and you. And as you know it always take some time and extra cups of coffee to read, compile and prepare a course or manual. If you have like reading this content and want to say thanks, please consider supporting from more stuff like this.

Leave a comment

Your email address will not be published. Required fields are marked *

*

*