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.
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.
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.
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 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;
}
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.
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.
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.
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.
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.
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
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
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.
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.