Skip to main content

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.

Example of SCSS code:

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

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.

The example above can be compiled with the command:

sass --watch my\path\style.scss:style.css

and it will display an error in style.css file as shown below:

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

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

Note that the syntax of sass command for the one-to-one mode:

sass <input.scss> <output.css>

Syntax Differences of SASS​

Most CSS and SCSS syntaxes work perfectly in SASS. However, there are some differences, which are explained below.

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.

Example:

.myclass 
	:color red 
	:font-size 0.2em
note

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 of multiline selectors in 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">Hello World</p>
      <p class = "class2">Another paragraph</p>
   </body>
</html>

Next, create file style.scss. (note the .scss extension)

.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 my\path\style.scss:style.css

And the generated style.css code is:

.class1,  
.class2 { 
	color: red;  
}

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, see Sass Comments Chapter.

@import​

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

Example of SCSS @import:

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

Example of SASS @import:

@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.

Example:

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

Output:

@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.

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

Table of Contents