Sass - Syntax

In this chapter, we will study 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.

For instance, consider the following SCSS code −

.myclass {
   color = red;
   font-size = 0.2em;
}

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 −

sass --watch C:\ruby\lib\sass\style.scss:style.css

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

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

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 −

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 −

.myclass
   :color red
   :font-size 0.2em

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.

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 −

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

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

style.scss

.class1,
.class2{
   color:red;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

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

.class1,
.class2 {
   color: red;
}

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.

Sass Syntax

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, refer this link.

@import

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 −

@import "themes/blackforest";
@import "style.sass";

This can be written in SASS as −

@import themes/blackforest
@import fontstyle.sass

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 −

=myclass
   font-size: 12px;
p
   +myclass

The above given code is the same as −

@mixin myclass
   font-size: 12px;
p
   @include myclass

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 $.
Advertisements