Sass Syntax - SASS (Syntactically Awesome Style sheets)

What about SASS Syntax?

SASS supports two syntaxes namely SCSS and Indented syntax.

  • The SCSS (Sassy CSS) is an extension of CSS syntax. This means every valid CSS is a valid SCSS as well. SCSS makes much easier to maintain large stylesheets and can recognize vendor specific syntax, Many CSS and SCSS files use the extension .scss.
  • Indented − This is older syntax and sometimes just called as SASS. Using this form of syntax, CSS can be written concisely. SASS files use the extension .sass.

SASS Indented Syntax

SASS Indented syntax or just SASS is an alternative to CSS based SCSS syntax.

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

consider the following SCSS code −

The indented syntax is an older syntax, which is not recommended for use in new Sass files. If you use this file, it will display error in the CSS file as we have used = instead of for setting properties and variables.

Compile the above given code using the following command −

Next, run the above command; it will display an error in style.css file as shown below −

Syntax Differences of SASS

Most CSS and SCSS syntaxes work perfectly in SASS. However, there are some differences, which are explained in the following sections −

What is Property Syntax?

CSS properties can be declared in two ways −

  • Properties can be declared similar to CSS but without semicolon(;).
  • colon(:) will be prefixed to every property name.

For instance, you can write as −

Both the above ways (properties declaration without semicolon and colon prefixed to property name) can be used, by default. However, only one property syntax is allowed to specify when you use the :property_syntax option.

What is Multiline Selectors?

In Indented syntax, selectors can be placed on a newline whenever they appear after commas.

Example

The following example describes the use of multiline selectors in the SCSS file −

Next, create file style.scss. Note the .scss extension.

style.scss

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

Next, execute the above given command, it will create the style.css file automatically with the following code −

The generated style.css is as shown below −

style.css

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in multiline_selectors.html file.

Open this HTML file in a browser, an output is displayed as shown below.

Multiline Selectors

Comments

Comments take up an entire line and enclose all the text nested under them. They are line-based in indented syntax. For more information about comments.

@import

Index

Directive

Description

1.

@import

It is used to import the sass or scss files. It directly takes the filename to import.

2.

@media

It is used to set style rule to different media types.

3.

@extend

It specifies and shares the rules and relationships between selectors.

4.

@at-root

It is specified as a collection of nested rules which is able to make style block at root of the document.

5.

@debug

This directive is used to detect the errors and display the SassScript expression values to the standard error output stream.

6.

@warn

This directive is used to get cautionary advice about the problem. It displays the SassScript expression values to the standard error output stream.

7.

@error

This directive is used to display the SassScript expression value as fatal error.

In SASS the @import directive can be written with/without quotes. Unlike in SCSS, they must be used with quotes.

For instance, in SCSS the @import directive can be used as −

This can be written in SASS as −

Mixin Directives

SASS supports shorthand for directives like @mixin and @include. Instead of @mixin and @include you can use = and + characters, which require less typing and makes your code simpler, and easier to read.

For instance, you can write the mixin directives as

The above given code is the same as −

Deprecated Syntax

SASS supports the use of some old syntax. However, using this syntax in SASS is not recommended. Warning will be displayed if you use this syntax and it is removed in later versions. Some of the old syntaxes are shown in the following table.

S. No.
Operator & Description
1
=
It was used instead of : when setting variables and properties to values of SassScript.
2
||=
It was used instead of : whenever you are assigning default value of a variable.
3
!
Instead of $, ! was used as variable prefix. Functionality will not be changed when it is used instead of $.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

SASS (Syntactically Awesome Style sheets) Topics