SASS Hits the HTML5 Developers ToolBox

SASS, the Buzzing word is the realm of web development industry. You may scratch your head in surfing over the gigantic database of google to get a quickstart on the idea of the CSS preprocessor and have reasons to choose SASS with a specific end goal to execute in your development phase.

Nowadays, the technologies that front-end developers entails to know right out of the door have broadened to likewise incorporate tools that streamline the work they do. CSS preprocessor is the heart of front-end developers which supercharges their productivity, to compose more concise CSS, and to keep files organized. Either it’s Sass, LESS, or Stylus, a pre-processor which can help build upon some of the CSS3’s best features. In this blog, we will check out Superpowers of SASS and how it paced in the html5 developer’s toolbox.

What is SASS?

This is the very first question comes in everyone’s mind. Hampton Catlin and Nathan Weizenbaum proposed a better way to maintain a complicated stylesheet and they developed a superpower named SASS, which stands for Syntactically Awesome Style Sheets.

How to get started with SASS?

Initial steps of process during installation. Guys don’t panic below are the steps to install.

To run Sass, you will need to have Ruby installed. Mac guys are lucky one’s, Ruby already comes preinstalled. Numerous different libraries, such as libSass which migrate Sass to NodeJS, without any need for Ruby.

Linux

If you’re using Linux, you need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.

To install SASS, you need to run a command in your terminal:

sudo su -c “gem install sass”

Windows

If you’re using windows, before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. The installer will also install a command line powershell application that will let you use the Ruby libraries.

• To install SASS, you need to run a command in your terminal: gem install sass
• Double Check that Sass is installed: Sass -v It should return Sass 3.4.22 (Selective Steve)

Mac

If you’re using Mac, ruby comes pre-installed. All you need to do is to run a command in the terminal.

• To install SASS, you need to run a command in your terminal: Sudo gem install sass
• Double Check that Sass is installed: Sass -v It should return Sass 3.4.22 (Selective Steve)

Once everything is setup we can jump to the basics now.

Why to opt for Pre-Processing CSS?

During the research on CSS preprocessor. Using special, supercharged CSS files that include factors, capacities, “mixins”, and different components. Once the development completes or in process, these files would then be compiled into regular CSS files which are compatible to all web browsers because scss files do not have compatibility in web browsers.

With SASS the same mystical preprocessing takes place. The terminal will take your preprocessed Sass file and convert the sass syntax into a normal CSS syntax that you can use in your website.

The most direct way to make this happen is in your terminal. Once Sass is installed, you can run sass input.scss output.css from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the –watch flag.

An example of running Sass while watching an entire directory is the following:

sass –watch app/sass:public/stylesheets

Using the terminal is just a option for those who have a good hand on it but there is always a way to compile. There a many open source and paid software/applications for compiling. But we recommend using scout. Scout is a open source application good for pre-processing very simple to use.

5 Reasons to consider SASS for your development

Let’s have a closer look at some of Sass’s core advantages and how they can transform CSS.

1) Beat the Clock with Variables.

Sass provides variables as a mechanism to store information which can be reused throughout your stylesheet. Variables helps to cut down the time on repetitive work.

Let’s say you’re using some cool shade in your application. Later on, your client doesn’t like the shade, and then you’re forced to change the colour, the only thing strikes are a lot of changes in the plain CSS. Well, sass reduces all this effort with variables. All you have to do is to declare a variable. You can store things like colours, fonts, or any CSS value you think you’d reuse. Sass uses the $ symbol to make something a variable.

Here’s an example:

SASS SYNTAX


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


When the Sass is processed, it takes the variables that we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS.

CSS SYNTAX


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


2) Make your code easier to maintain

It’s better known that fewer codes lead to better productivity which is forever a win. Many times HTML5 Responsive web designer know about customization tools like libraries, frameworks and API’s. Meanwhile, in respect to CSS, it’s no contrary and SASS win the race with its features like “mixins.” By creating a mixin, developers can group CSS declarations and reuse them throughout the file, without a lot of tedious coding.

Instead of typing the same property over and over we write a mixin once then inherit whenever required.

To declare, @mixin keyword is used followed by a rule border-radius and brackets which would have a variable for that rule $radius.

Here’s an example:

SASS SYNTAX


@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

 

When defining a class for mixin, in this case it is .box then you need to use “@include” followed by a rule “border-radius”.

CSS SYNTAX


.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}


3) Make your CSS more organized with Nesting in SASS

One more interesting feature with SASS is the ability to nest elements inside each other. When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy
CSS, doesn’t.

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. But make sure that excessively nested rules will affect in CSS that could prove hard support and is generally considered bad practice.

Here’s a nested example:

SASS SYNTAX


nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}


CSS SYNTAX


nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}


4) Build your CSS even more modular and easier to work with

The use of partials permits us an incredible approach to modularize our code, with a growing website the complexity increases which heads towards bigger CSS stylesheets but with SASS it makes it more portable and easier to maintain.

A partial is simply a Sass file named with a leading underscore such as _partial.scss The underscore lets Sass know that the file is only a partial file and it should not be generated into a CSS file, however partials that are imported into the main scss file are compiled into the main css file and get converted into css syntax. Sass partials are used with the @import directive.

Here’s an nested example:

SASS SYNTAX


@import 'partial-file-name'; (this @import is written inside the main scss file)


5) @extend saves your time

Here the word Inheritance plays a major role. One more time-saver concept especially beneficial to developers lets them share properties between selectors.

Let’s make it simple in developing a website there are series of the button like login, sign up, save and edit which is of the same shape, size, rounded edges, color, and fonts. Maybe Login goes for green, place a call to yellow, make payment goes to red and so forth but all attributes go same throughout the website. All these attributes will be coded once and inherited with the @extend keyword for its use, which saves developers time.

For example we’re going to create a simple series of buttons for login, sign up, save and edit

SASS SYNTAX


.login {
border: 1px solid #ccc;
padding: 10px;
color: #139016;
}
.signup{
@extend .login;
border-color: green;
}
.save{
@extend .login;
border-color: red;
}
.edit {
@extend .login;
border-color: yellow;
}


What the above code does is it allows you to take the css properties in .login and apply them to .signup, .save & .edit. Once the code is generated into css it then looks something like this:

Here’s an example:

CSS SYNTAX


.login, .signup, .save, .edit {
border: 1px solid #cccccc;
padding: 10px;
color: #139016;
}
.signup {
border-color: green;
}
.save {
border-color: red;
}
.edit {
border-color: yellow;
}


6) Do Math with SASS operators

Sass permits you with the standard math functions like +,-,*, / and &. Obviously, these functions can fuse to create complex estimations.

The good news is Sass has a few built-in functions to help manipulate numbers. Functions like round(),percentage() , random(), floor(), round() etc.

SASS SYNTAX


.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}


Accordingly, we can conclude with CSS preprocessors that are impressive and help us to streamline our development process. While it gives the idea that Sass is popularly known for its feature-rich extensions which can make your CSS more maintainable, theme oriented and extendable. Browse our HTML5 website developers for your next development projects.