SASS stands for Syntactically Awesome Stylesheet. It is a CSS pre-processor, that assists to decrease recurrences with CSS, defines the style of document structurally, and saves the development time. It is a CSS extension language which is very stable and powerful. It provides indented syntax i.e. its own syntax for CSS. SASS language has the following features.
- It is used to create stylesheets through which we can write code very efficiently and the code is very easy to maintain.
- SASS has a well-structured Document style than flat CSS. It encourages the reusability of logic statements, methods, and other in-built functions such as mathematical functions, color code functions, etc.
- It is compatible with different versions of CSS.
- It makes the CSS easy to read and user-friendly.
- SASS enables us to write less code and hence saves time.
The following are the pros of using SASS.
- We can write clean CSS in a programming construct.
- We can write our CSS using SASS very quickly.
- Being superset of CSS, the web designers find using SASS very efficient and quick to complete web design work.
- SASS shows backward compatibility with all CSS versions and therefore, we reuse available CSS libraries.
- We can use inbuilt functions such as mathematics functions, color manipulators, etc. We can use nested functions as well in SASS.
The following are the cones of using SASS.
- It has a quite wide learning curve and it takes time to learn new features of SASS present in this pre-processor for a newbie.
- We may lose various built-in element inspectors provided by the web browser.
- At times, it becomes difficult to maintain a website where some developers are using SASS and some are using CSS to edit the files directly by using the same preprocessor.
SASS environment setup and System Requirements
Given below are the steps for SASS installation. Before we discuss the installation steps, let us discuss the system requirements.
- OS: It supports Cross-platform operating systems
- Browser Requirement: It supports IE 8+ onward, Google Chrome, Opera Firefox, and Safari
- Supported Programming Language: Ruby
SASS Installation Steps
SASS requires Ruby runtime to be installed on your machine before working on any SASS Project. The following are the steps.
Step 1: Download Ruby runtime from the given link. https://www.ruby-lang.org/en/downloads/
Step 2: Click on Ruby 2.6.1 link to download ruby-2.6.1.tar.gz. Alternatively, for Windows operating system you can choose https://rubyinstaller.org/downloads/ to download and install Ruby DevKits. We are going to use Windows installer for the installation and setup of Ruby runtime.
Step 3: Choose the path and folder name where you want to install Ruby packages. Here, we have chosen path and folder name as ‘C:\Ruby25-x64’ as shown below. Keep the two checkboxes checked in and then click on the install button.
Step 4: It will take quite a while to download and install Ruby packages. Progress can be monitored with the help of the progress bar as shown below.
Step 5: Upon successful installation, we can see the following confirmation on the screen.
Step 6: Type 1 and press enter on the command line window which has opened automatically after clicking the Finish button as shown above.
Step 7: Next, open a windows command prompt and enter the following command (in bold).
Microsoft Windows [Version 10.0.17763.292]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Ruby25-x64>gem install sass
Fetching: rb-fsevent-0.10.3.gem (100%)
Successfully installed rb-fsevent-0.10.3
Fetching: ffi-1.10.0-x64-mingw32.gem (100%)
Successfully installed ffi-1.10.0-x64-mingw32
Fetching: rb-inotify-0.10.0.gem (100%)
Successfully installed rb-inotify-0.10.0
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.7.3.gem (100%)
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
primary implementation: https://sass-lang.com/install
* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
sassc gem: https://github.com/sass/sassc-ruby#readme
* For more details, please refer to the Sass blog:
Successfully installed sass-3.7.3
Parsing documentation for rb-fsevent-0.10.3
Installing ri documentation for rb-fsevent-0.10.3
Parsing documentation for ffi-1.10.0-x64-mingw32
Installing ri documentation for ffi-1.10.0-x64-mingw32
Parsing documentation for rb-inotify-0.10.0
Installing ri documentation for rb-inotify-0.10.0
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.7.3
Installing ri documentation for sass-3.7.3
Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 9 seconds
5 gems installed
Step 8: At this point Ruby installation as well as gem sass packages are completed successfully on your machine.
Let’s develop a working example on SASS.
Step 1: Create a style.scss with the following lines of code and save this file under C:\Ruby25-x64\lib\ruby\sass
$firstValue: 24px !default;
Step 2: Next, we need to tell SASS to watch this file and update the CSS whenever SASS file changes. We need to use the following command on the windows command line.
C:\Ruby25-x64>sass --watch C:\Ruby25-x64\lib\ruby\sass\style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
Step 3: Create hello.htm file at C:\Ruby25-x64, where we will be using newly compiled style.css file as shown below.
<title> SASS Demo Example</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
Output: When we open the hello.htm file in any supported web browser then we can observe that style.css compiled from style.scss gets reflected on the web page as shown below.
In this article, we discussed SASS key features, pros and cons of using SASS, steps to set up a SASS environment including the installation of Ruby runtime on the windows machine. Lastly, we created a simple SASS program and used the compiled style.css in the hello.htm web page to demonstrate simple SASS working.
In the meantime, you can take the complete online tutorial for learning all the fundamentals of SASS which helps you in building modern, beautiful & real-world websites.