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:
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: