Web Programming TutorialsFundamentals of SASS

Fundamentals of SASS

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 programming 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 programming is a superset of CSS. Therefore, it has all the features of CSS and based on JavaScript. CSS pre-processor is code in Ruby language.
  • SASS programming 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 programming enables us to write less code and hence saves time.

Pros

The following are the pros of using SASS programming.

  • 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 programming.

Cons

The following are the cones of using SASS programming.

  • 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.

System Requirements

  1. OS: It supports Cross-platform operating systems
  2. Browser Requirement: It supports IE 8+ onward, Google Chrome, Opera Firefox, and Safari
  3. Supported Programming Language: Ruby

SASS Installation Steps

SASS programming 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/

Ruby

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.

Ruby Setup

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.

Ruby Installation

Step 5: Upon successful installation, we can see the following confirmation on the screen.

Ruby Setup Wizard

Step 6: Type 1 and press enter on the command line window which has opened automatically after clicking the Finish button as shown above.

Window Command Prompt

Step 7: Next, open a windows command prompt and enter the following command (in bold).

SASS:

Microsoft Windows [Version 10.0.17763.292]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\aparajita>cd C:\Ruby25-x64

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:
  http://sass.logdown.com/posts/7081811

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

C:\Ruby25-x64>

Step 8: At this point Ruby installation as well as gem sass packages are completed successfully on your machine.

SASS programming Example

Let’s develop a working example on SASS programming.

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;

body {
    font-size: $firstValue;
    background-color: afaffe;
}

h1 {
   color: #CF80ED;
}
h2 {
   color: #AE5D74;
}
h3 {
   color: #CE5A74;
}
h4 {
   color: #AE5B74;
}

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.

SASS watch:

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.
      write style.css
      write style.css.map

Step 3: Create hello.htm file at C:\Ruby25-x64, where we will be using newly compiled style.css file as shown below.

<html>
   <head>
      <title> SASS Demo Example</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
   </body>
</html>

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.

Output

Conclusion

In this article, we discussed SASS programming 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -