SASS | CSS Preprocessor | Installation | Features

Sass Introduction

Syntactically Awesome StyleSheet(SASS) is a CSS pre-processor. It helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes the style of document structurally. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Sass is interpreted or compiled into Cascading Style Sheets (CSS). SassScript itself is the scripting language.

Sass Syntax

Sass consists of two syntaxes:

The indented syntax (Sass) is the original syntax. It has given the extension .sass. It provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Some people find this to be easier to read and quicker to write than SCSS. The indented syntax has all the same features, although some of them have slightly different syntax; this is described in the indented syntax reference.

The SCSS (Sassy CSS) uses block formatting like CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. It is the newer syntax. It has given the extension .scss. Scss is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. SCSS understands most CSS hacks and vendor-specific syntax.

Sass syntax can import files written in the other. It can automatically convert one syntax to the other using the sass-convert command line tool:

# Convert Sass to SCSS

$ sass-convert style.sass style.scss

# Convert SCSS to Sass

$ sass-convert style.scss style.sass

[Note: This command does not generate CSS files.]

Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Natalie Weizenbaum and Chris Eppstein have extended Sass with SassScript. SassScript is a simple scripting language used in Sass files.

Sass-Logo-MSA-Technosoft

Install Sass

We can install Sass in two ways: By using Application & By using Command Line

Installing Sass via Application

There are so many applications available in market that allows us to easily install Sass in a few minutes by following several easy steps. Most of these apps are free of cost but a few of them are paid.

  • CodeKit (Paid)
  • app (Paid, Open Source)
  • Ghostlab (Paid)
  • Hammer (Paid)
  • Koala (Open Source)
  • LiveReload (Paid, Open Source)
  • Prepros (Paid)
  • Scout-App (Free, Open Source)

Install Sass via Command Line

If we install Sass on the command line, we can run the sass executable to compile .sass and .scss files to .css files. For example:

sass source/stylesheets/index.scss build/stylesheets/index.css

Install Sass first. Then run sass --version to be sure it installed correctly. If it did, this will include 1.9.0. You can also run sass --help for more information about the command-line interface.

Once it’s all set up, go and play.

Install Sass npm

If you use Node.js, you can also install Sass using npm by running

npm install -g sass

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed!

Why Choose Sass? | Features of Sass

  • Fully CSS-compatible
  • Language extensions such as variables, nesting, and mixins
  • Many useful functions for manipulating colors and other values
  • Advanced features like control directives for libraries
  • Well-formatted, customizable output

CSS Extensions

Syntactically Awesome Style Sheet has its own SassScript. CSS Extensions can be used to enhance the functionality of the web pages. SassScript provides the following mechanisms:

Sass Variables

Sass allows variables to be defined. The most straightforward way to use SassScript is to use variables. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:).

$width: 5em;

You can then refer to them in properties:

#main {
 width: $width;
}

Sass Data types

SassScript supports eight data types:

  • numbers (e.g. 1.2, 13, 10px)
  • strings of text, with and without quotes (e.g. “foo”, ‘bar’, baz)
  • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
  • booleans (e.g. true, false)
  • nulls (e.g. null)
  • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
  • maps from one value to another (e.g. (key1: value1, key2: value2))
  • function references

SassScript also supports all other types of CSS property value, such as Unicode ranges and !important declarations.

Nested Rules

Sass allows CSS rules to be nested within one another. The inner rule then only applies within the outer rule’s selector. For example:

#main p {
	color: #00ff00;
	width: 97%;
	.redbox {
	background-color: #ff0000;
	color: #000000;
}
}

is compiled to:

#main p {
	color: #00ff00;
	width: 97%; 
}
#main p .redbox {
	background-color: #ff0000;
	color: #000000; 
}

This helps avoid repetition of parent selectors, and makes complex CSS layouts with lots of nested selectors much simpler.

Nested Properties

CSS has quite a few properties that are in “namespaces;” for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. Sass provides a shortcut for this: just write the namespace once, then nest each of the sub-properties within it. For example:

.funky {
	font: {
	    family: fantasy;
	    size: 30em;
	    weight: bold;
	}
}

is compiled to:

.funky {
	font-family: fantasy;
	font-size: 30em;
	font-weight: bold; 
}

The property namespace itself can also have a value.

Placeholder Selectors

Sass supports a special type of selector called a “placeholder selector”. These look like class and id selectors, except the # or . is replaced by %. They’re meant to be used with the @extend directive.

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

Referencing Parent Selectors

Sometimes it is useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over or for when the body element has a certain class. In these cases, you can explicitly specify where the parent selector should be inserted using the & character. For example:

a {
	font-weight: bold;
	text-decoration: none;
	&:hover { 
		text-decoration: underline; 
	}
	body.firefox & { 
		font-weight: normal; 
	}
}

is compiled to:

a {
	font-weight: bold;
	text-decoration: none; 
}
a:hover {
	text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

& will be replaced with the parent selector as it appears in the CSS. This means that if you have a deeply nested rule, the parent selector will be fully resolved before the & is replaced.

Comments

Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed.

When the first letter of a multiline comment is !, the comment will always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.

Functions

SassScript defines some useful functions that are called using the normal CSS function syntax:

p {
	color: hsl(0, 100%, 50%);
}

is compiled to:

p {
	color: #ff0000; 
}

 

CSS Preprocessor

CSS preprocessor is basically a scripting language. It extends CSS and compiles it into regular CSS. LESS and SASS are two most common CSS pre-processors available in market today. By switching to a preprocessor can help streamline your development process. It allows you to design a website with cleanliness. It reduces CSS and increases efficiency. The first question comes in mind is why to use CSS Preprocessor? Here are some benefits of using a CSS pre-processor:

  • It allows you to write cleaner code with reusability.
  • Easy to manage codes
  • Saves time and effort
  • Easy to setup and well organised
  • Logic and Ability

 

Was this article helpful? We would love to hear from you. Share your views in the comment section below. For latest technology posts, keep visiting our Tech-Blog.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.