Sass Tutorial for Beginners
2019-01-18 05:51:07

Sass Tutorial for Beginners

Introduction to Sass Tutorial

SASS stands for Syntactically Awesome Stylesheet. SASS is a CSS pre-processor. It helps to avoid repetition with CSS and also it saves time. SASS is a very powerful CSS extension language. It is more stable. It describes the style of a document more cleanly and structurally.
It has the facility to add variables, inline imports, inheritance etc. It can handle large style sheets keeping them well organized and can run them in small style sheets. As SASS is a pre-processing language, it provides indented syntax for CSS. It is also easy to maintain. SASS is a superset of CSS. It contains all the features of CSS. SASS is coded in Ruby. It provides the document in good structure as compared to flat CSS.

History of SASS

SASS was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006 as a feature of the HAML markup language. In 2008, Chris Eppstein, the creator of Compass, later joined primary developer Weizenbaum to continue to extend SASS with SassScript. SASS is written in Ruby. It has ported to languages such as C, C++, Java, JavaScript, .Net, Perl, PHP, Python and Scala.

Architecture for a SASS Project

Following is the file organization for SASS project

Difference Between SASS vs. SCSS

SASS SCSS
SASS syntax is more concise SCSS is more expressive
The syntax is easy to read. SCSS encourages proper nesting of rules
The Sass syntax doesn't complain about missing semi-colons. It encourages more modular code with @extend

System Requirements

Operating System: Cross-platform Browser Support: IE, Firefox, Google Chrome, Safari, Opera Programming Language: Ruby

SASS Installation

  1. Install Ruby by clicking on the following link
https://www.ruby-lang.org/en/downloads/
  1. After installation, go to start menu and open cmd with ruby.
  2. Enter gem install sass on cmd.

Sass Commands in Ruby

  1. To install SASS gem: gem install sass
  2. To run SASS from the command line: sass test_input.scss test_output.css
  3. To update file: sass --watch test_input.scss:test_output.css
  4. To check all SASS files: sass --watch app/sass:public/stylesheets
  5. To view SASS documentation: sass -help

Variables of SASS

Variables are used to store information which can be used in any stylesheet. $ is used to declare a variable. Syntax: 
$font-type:    Verdana

$prime-color: red

body

font: 100% $font- type

color: $prime-color

 @-Rules and Directives

  1. @import
It is used to import SASS files.
  1. @media
It is used to set a style rule for different media types.
  1. @extend
It is used to share rules and relationship.
  1. @at-root
It is a collection of nested rules.
  1. @debug
It is used to detect errors.
  1. @warn
It is used to given cautionary advice about the problem.
  1. @error
It is used to display SassScript expression value as a fatal error.

Features of SASS

  1. It is stable, powerful, and compatible with all versions of CSS.
  2. It is based on JavaScript and is a superset of CSS.
  3. SASS is known as syntactic sugar for CSS because it is easy to read and the user can express things clearly.
  4. It has its own syntax and compiles, which is in readable CSS form.
  5. SASS is an open source pre-processor also interpreted into CSS. 

Advantages of SASS

  1. Clean CSS can be written.
  2. CSS can be written quickly.
  3. Designers and developers work more efficiently.
  4. It is compatible with all versions of CSS.
  5. Nested syntax can be used.
  6. Pre-define functions for color manipulation, mathematics etc.

Disadvantages of SASS

  1. To learn new features which are present in pre-processor requires a lot of time of the developer.
  2. If a group of people is working on the same site then each person should use the same preprocessor.
Also Read: Most Commonly Asked SASS Interview Questions and Answers for Fresher Reference: https://www.javatpoint.com/sass-tutorial