What is Sass?

Sass stands for Syntactically Awesome Stylesheets

Sass is a CSS preprocessor which makes your work simple by facilitating you with variables, mixins, inheritance and ton of cool features that help you to write codes in a much less time. It can be pretty helpful for creating nice & neat code.

CSS

Using Sass

Sass consists of two syntax:

  1. Sass
  2. SCSS

Sass is the original syntax, called “The indented Syntax”. This syntax doesn’t require curly braces and semicolon that are a require in CSS. Using newlines and indentation(two white spaces), Sass is able to read and compile as if they were there:

SCSS – “Sassy CSS” is newer syntax that uses block formatting same as CSS. SCSS is uses the curly brackets to identify code blocks and semicolon to separate lines in blocks:

How it Works?

Sass is command line CSS compiler that reads and compiles the codes to clean and structured CSS that you have write in .sass or .scss. For example,

Some Features of Sass

The advantages of using Sass are the drivers behind the usage which is:

  • Implementing the DRY(Don’t Repeat Yourself).
  • Adding dynamic programming functionality instead of a very static language: CSS
  • Code Reusability(Inheritance)

Let’s get familiar with Compass

Compass is an extension of Sass. It has its own compiler so, you use compass watch command instead of sass –watch.

It is a CSS framework that contains large collection of mixins and functions that you will find incredibly useful. This will generate a set of codes in your CSS file with the values you pass as parameters. For example,

Variables

Sass provides way to be able to use variables within CSS before it is compiled, allowing for re-usable data. The Sass variables begin with dollar sign($).

Nesting

This is one of the more useful features of Sass along with the variables. It allows you to target particularly nested HTML components such as navigation:

@import

CSS has @import functionality but each time you use @import in CSS it creates another HTTP requests. In Sass, it avoids to creating additional HTTP requests because files are imported and concatenated on compile rather than browser run-time.

Mixin

Mixin is a very brilliant feature of Sass and i personally love it. The excellent example of this feature is, when you need to use CSS property that has a vendor prefixes. For example, border-radiusbox-shadow and many other.

Operators

Like many other programming languages, Sass has operator to perform basic math operation in your CSS.

Extend(Inheritance)

Most of all programming language has this feature called “inheritance”. Using @extend, you can share CSS properties from one selector to another so it helps keep your Sass very DRY

Sass is very easy to use and understand. I swear that, once you understand the Sass’ methods and syntax, you’ll never want to go back to writing static CSS again.

More Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

CSS measuring Units
CSS Web Design

Measurement Units in CSS

CSS offers a number of different units for expressing length. It includes absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You required these values while specifying various measurements in your stylesheet. It supports various measurement units which are listed below: Using em This measurement […]

Read More
WordPress Loop
CSS

WordPress Loop

The WordPress loop is a list of all or limited number of post and page entries in database. It is the main part of each WordPress theme and core of every WordPress powered site. It cycles through posts that allow us to display them in any manner we want. Before we start, let’s see how […]

Read More
Fonts
CSS

11 Great and Modern Fonts with Personality

This font collection is created by Antonio Rodrigues who is Brazil-born graphic designer and illustration. His work includes projects in typography, lettering, crafts, branding and sculpture. 1. Berlin Berlin is a group of display fonts inspired by the classic geometric typefaces from early last century. It features (so far) four versions, each one in three weights: regular, […]

Read More