Sass Syntax

SCSS Syntax

The syntax for Scss is similar to Cascading Style Sheet with some changes in the syntax, which further simplifies writing the code to style complex HTML structures. It's a superset of CSS, which essentially means all valid CSS is valid SCSS as well. Scss also provides us with features like operators usage, variables, many ready-made functions, etc. 

SCSS Syntax looks like this:

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

 
  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

 

This blog will focus on some important syntax changes introduced in Scss that were not available in CSS.

Comments in SCSS

The Scss supports both Single line comments // and Multiline comments */. But once the Scss or Sass file is compiled into CSS, the resulting Cascading Style Sheet will only preserve the multiline comments, not the single-line comments, because CSS doesn't support single-line comments. 

// Hello
// CODING NINJAS

/*  
   Hello Coding Ninjas
*/

// Thank you

.hello-world
{
    background-color:pink;
}

 

If we execute the above Scss code to CSS, the generated CSS will look as shown below:

/*  
   Hello Coding Ninjas
*/
.hello-world
{
    background-color:pink;
}

 

Nested Rules

In HTML, we have nested and visual hierarchies. Let's take an example, if we create a list, we use the <li> tag to create list items inside the <ol> or <ul> tag. But Cascading Style Sheets does not support such nested syntax. 
 

 

Let’s see an Example: 

HTML Code:

<div id="sidebar">
<ul>
    <li>Coding Ninjas</li>
    <li>DSA</li>
    <li>Web</li>
    <li>AI</li>
    <li>ML</li>
</ul>
</div>

 

CSS Code:

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

 

We can apply the nested rules to do so in a more readable way in Scss:

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
   
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
   
    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}

 

Output:

Parent Selector

In syntactically awesome style sheets syntax, we can use & symbol to represent the parent class and define further nested rules. This & symbol makes it possible to re-use the outer selector in more complex ways, such as adding a selector before the parent or adding a pseudo-class.

 

HTML Code:

<div id="codingninjas">
  <div id="codingninjas-body">
   <h1><a href="https://www.codingninjas.com/">Coding Ninjas</a></h1>
   </div>
 </div>

 

CSS code:

a{
    text-decoration: none;
    color:black;
}
a:hover
{
    color:red;
}

 

When we have to use pseudo-selectors like  : selected,  :hover etc, with the main element, this will feel handy.

a {
    text-decoration: none;
    color:black;
    // using parent selector
    &:hover {
        color:red;
    }
}

 

Output:

Nested property

Sass provides one more CSS extension to save you time and make your code more readable using nested properties.

While in CSS, There are many properties with the same prefix as font-weight, font-size, font-family, or text-align, text-transform and text-overflow, etc. We need to type the complete property name to style our HTML elements. But syntactically awesome style sheets syntax allows us to define nested properties with the prefix declared only once like this:

SASS Syntax code:

font: {
    family: Calibri;
    size: 13px;
    weight: 600;
}

 

Sass code is converted into the following CSS:

font-family: calibri;
font-family: 13px;
font-weight: 600;

Placeholder Selector

Sass has a unique kind of selector known as a “placeholder”. 

Placeholder selector looks and acts like a class selector, but it starts with a %, and it's not included in the Cascading Style Sheet output. Any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the Cascading Style Sheet, nor is any style rule whose selectors all contain placeholders.
 

Let’s take a look:

%card {
	box-sizing: border-box;
	border-top: 2px rgba(#000, .13) solid;
	width: 100%;
	&:hover {
		border: 2px rgba(#000, .5) solid;
	}
}

.card-light {
	// inheriting card styling rules
	@extend %card;
	background-color: #FFFFFF;
	color: #000000;
}

.card-dark {
	// inheriting card styling rules
	@extend %card;
	background-color: #000000;
	color: #FFFFFF;
}

 

Sass code is converted into the following CSS:

.card-light,
.card-dark {
	box-sizing: border-box;
	border-top: 2px rgba(#000, .13) solid;
	width: 100%;
}

.card-light:hover,
.card-dark:hover {
	border: 2px rgba(#000, .5) solid;
}

.card-light {
	background-color: #FFFFFF;
	color: #000000;
}

.card-dark {
	background-color: #000000;
	color: #FFFFFF;
}

 

FAQs

1. What is the difference between CSS and LESS?
   One of the best advantages of LESS is that it simplifies the management of a large volume of CSS styles and makes CSS more flexible. Moreover, this stylesheet language adds multiple dynamic features to CSS; it introduces nesting, variables, operators, mixins, and functions.
    
2. How do we nest in Sass?
   Nesting styles is simple enough. You can just enclose a selector inside the curly braces of another selector. Nesting can extend as many levels long as you wish. This means that you can nest elements inside of a component that is nested inside another element.
    
3. What are the differences between Leaner Style Sheets and syntactically awesome style sheets?
    

S.no	Leaner Style Sheet	Syntactically awesome style sheet
1	Leaner Style Sheets uses JavaScript and are processed at the client side.	Syntactically awesome style sheets is coded in Ruby and thus processed to server-side.
2	Leaner Style Sheets does not inherit multiple selectors with one set of properties.	Syntactically awesome style sheets inherit multiple selectors with one set of properties.

4. What are Sass, Stylus and Less? Why do we use them? How is Compass related to Sass?

They are Cascading Style Sheets preprocessors. They are a special syntax that compiles down into CSS. They make managing Cascading Style Sheets easier, with things like variables and mixins to handle vendor prefixes. They make doing best practices easier, like compressing and concatenating CSS.

Key takeaways

In this blog, we have discussed syntactically awesome style sheets Syntax and some significant syntax changes introduced in Scss.

If you are pursuing a new career in Web Development, we suggest you get your fundamentals crystal clear with our Full Stack Development course. 
Check out this problem - Redundant Braces

Happy Learning, Ninja!

This course will help you!