SASS - A CSS Preprocessor


Introduction to SASS


Syntactically Awesome Style Sheet or simply called as SASS is a CSS preprocessor.
  • It enables you to create style sheets faster.
  • Extends the functionality of CSS by allowing you to use variables, nested rules, functions,
and mixins.
SASS is written in Ruby language
LESS, Stylus and PostCSS are few other popular CSS preprocessors.

Features of SASS

  • Sass is more stable, powerful and compatible with all versions of CSS.
  • It is an open source preprocessor.
  • It has its own syntax, which compiles to readable CSS. Hence you can write CSS easily (less code in less time).


Syntax of SASS


You are now equipped with the knowledge to install SASS, you will now move on to the programming
part.
You must know that SASS supports two types of syntax:
  • SASS Syntax
  • SCSS Syntax

SASS Syntax


It uses indentation to identify code blocks and newline to separate lines within a block. These
files are saved with the sass extension.

Sample:


.new
color:#ff0055
font-weight:bold
span
text-transform: uppercase

Syntax of SCSS
SCSS syntax

An extension of CSS syntax is SCSS (Sassy syntax).
It uses braces to identify code blocks and semicolons to separate lines within a block. These
files are saved with the scss extension.

Sample:


.new {
color:#00ff55;
font-weight:bold;
}
span {
text-transform: uppercase;
}

SASS Datatypes
Supported datatypes


  1. Numbers
  2. Strings
  3. Colors
  4. Booleans and Nulls
  5. Lists
  6. Map

1.Numbers

Sass can recognize numeric datatype such as integer or real but it cannot recognize standard
units such as em or px.

Example:


add: 43 + 6; //"plain numbers added together
add: 43px + 6; //"plain" number added to a pixel value
add: 22em + 8em; //two "en" values added together
add: 22px + 8em;// error

2.Strings

Sass strings are mentioned within single quotes, double quotes or without quotes.

Example:
SCSS file

$default-font: 'Arial';
P {
font-family: $default-font, "Verdana", Georgia;
}

CSS file

P {
font-family: Arial', "Verdana", Georgia;
}

3.Color

Sass supports the same color extensions used in CSS.

Example:

rgb(101,24,65)
rgba(121,54,153,35)
hs1(0,50%, 100%)
hsla (0,50%, 100%,0.4)

4.Boolean, Nulls and Lists

Sass uses True and False as boolean values and it also supports null value.

5,Lists:

Sass list is a series of values that are separated by commas and spaces.

Example:

$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 10px 20px 13px;
Sass also supports nested lists.

6.Map

Maps are key-value pairs.
  • They are wrapped within parenthesis.
  • The map never writes their output directly to the CSS file, but map functions do

Example:
SCSS file

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);
P {
color: map-get($red-map, light);
}

CSS file

p
{
color: $e57373;
}