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; 
}

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

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

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.