99

Sass Syntax

Sass supports two syntaxes:

SCSS Syntax: The SCSS (Sassy CSS) can be specified as an extension of CSS syntax. It simply means that every valid CSS is a valid SCSS also. SCSS makes it easy to maintain large style sheets. It uses the extension “.scss”.

Indented syntax: Indented syntax is the older syntax and called as Sass. You have to write CSS concisely for using this type of syntax. It uses the extension .sass”.

---

Sass Indented Syntax

SASS Indented syntax or SASS is an alternative to CSS based SCSS syntax. It has the following features:

• It uses indentation rather than {and} to delimit blocks.
• It uses newlines instead of semicolons (;) to separate statements.
• Property declaration and selectors must be placed on its own line and statements within {and} must be placed on new line and indented.

See the following SCSS code:

This syntax is older so it is not recommended to use in new Sass files. If you use this file, you will get an display error.

---

Syntax Differences of Sass

Most of the CSS and SCSS syntaxes are compatible with SASS but there are some differences also. You can see the differences in the following sections:

1.Property syntax:

You can declare Sass properties in two ways:

Declare properties similar to CSS but without semicolon (;).

Declare a colon ( : ) as a prefix to every property name.

For example:

Both properties declaration methods i.e. without semicolon and colon prefixed to property name can be used by default but you should use only one property syntax to specify when you use the: property_syntax option.

2.Multiline Selectors

In intended syntax, multiline selectors specify that you can place a selector on newline whenever they appear after commas.

See this example:

HTML file: example.html

SCSS file: style.scss

Tell the SASS to watch the file and update the CSS whenever SASS file is changed.

Open command prompt with ruby and se the following command:

sass --watch style.scss:style.css

It will create a style.css file. Now, run the example.html file:

Output:

In this example you can see the use of multiline selectors.

@import Directive

In SASS the @import directive can be written with or without quotes On the otherhand in SCSS, they must be used with quotes.

For example: In SCSS the @import directive can be used as:

In Sass, it can be written as:

Mixin Directives

SASS supports shorthand properties for directives like @mixin and @include. You can use = and + characters instead of @mixin and @include. It requires less typing and makes your code simpler, and easier to read.

For example: You can write mixin directives as:

It is same as: