SASS/SCSS Syntax

As we have learned in the introduction to Sass tutorial, how Sass is different from CSS and what benefits it brings along. In this tutorial, we will learn about the syntax of Sass and will also see how it is better than the traditional CSS syntax.

SASS File Extension

Sass supports two different file extensions, namely, .sass and .scss, one is for SASS code and the other is for SCSS syntax. As we already mentioned in our introduction tutorial, Sass became Scss from version 3 which has a syntax which is very much similar to CSS as compared to Sass which has a very different syntax.

If you have some code written as per Sass syntax and you want to convert it into Scss syntax, you can do so using the sass-convert command. For example, if we have Sass code in sass-style.sass file and we have scss-style.scss for Scss code, we can convert the Sass code to Scss code using the following command,

sass-convert sass-style.sass scss-style.scss

We can use this for converting Scss code to Sass code as well.

SCSS Syntax

The syntax for Scss is similar to CSS with some changes in the syntax which further simplifies writing the code to style complex HTML structures. Scss also provides us with features like variables, operators usage, many ready-made functions, etc, we will learn about them in the coming tutorials. In this tutorial, we will only focus on some important syntax changes introduced in Scss which were not available in CSS.

1. Comments in SCSS

The Scss supports both single-line and multi-line comments i.e // and /* */. But once the Scss or Sass file is compiled into CSS then the resulting CSS will only preserve the multiline comments not the single-line comments, because CSS doesn't support single-line comments. Let's have an example.

// Hello
// This is Sass tutorial

/*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/

// Thank you

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

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

/*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/
.hello-world
{
    background-color:pink;
}

2. Nested rules

In HTML, we have nested and visual hierarchy. For example, if we create a list, we use the <li> tag to create list items inside the <ul> or <ol> tag. But CSS doesn't support such nested syntax. So if we have to style a list and its items present in the sidebar of a webpage, with the following HTML code,

<div id="sidebar">
    <ul>
        <li>Tutorials</li>
        <li>Q & A Forum</li>
        <li>Flashcards</li>
        <li>Tests</li>
        <li>Collaborate</li>
    </ul>
</div>

We will write our CSS code as follows,

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

But in Scss we can use the nested rules to do so in a more readable way,

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

See, its better than CSS.

3. Parent Selector

In Sass syntax, we can use & symbol to represent the parent class and define further nested rules. Let's take an example to understand this. Consider the following HTML code,

<div id="studytonight">
    <div id="studytonight-body">
        /* Some HTML code */
    </div>
</div>

As we have seen in the example above in nested rules, we can use Sass nested rules to define styling for #studytonight and #studytonight-body, but Sass makes it further easier using the parent selector syntax.

#studytonight {
    // styling for #studytonight div
    &-body {
        // styling for #studytonight-body div
    }
}

The & symbol gets compiled to the parent selector value when the Sass code is transpiled to CSS code. This comes in handy when we have to use pseudo-selectors like :hover, :selected etc with the main element. So if you have an anchor tag and you want to define styling for it for mouse hover, you can do so like this in Sass,

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

This is equivalent to the following CSS code,

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

4. Nested Properties

In CSS there are many properties that have the same prefix as font-weight, font-size, font-family, etc. In CSS we have to type the complete property name to use them for styling our HTML elements. But Sass syntax allows us to define nested properties with the prefix declared only once like this,

font: {
    family: calibri;
    size: 12px;
    weight: 500;
}

This Sass code is transpiled into the following CSS,

font-family: calibri;
font-family: 12px;
font-weight: 500;

Hence saving you some code typing.

5. Placeholder Selectors

Placeholder selectors or placeholder class in Scss/Sass is used to define styling rules which do not have any meaning by themselves but provide meaning to the class which inherits this. As we have already specified in the introduction tutorial that Sass supports Inheritance, this is how inheritance works in Sass. We define a placeholder selector using the % symbol, provide some styling rules in it, and then we can inherit this class into other classes. This is very helpful when we have some common styling code that we want to include in multiple styling classes.

Let's take an example to understand this special feature of Sass.

%card {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) 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;
}

The above code will be transpiled into the following CSS code,

.card-light, .card-dark {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) 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;
}

If we do not extend/inherit the placeholder selector in Sass code, then they are omitted out from the compiled CSS code.

Conclusion:

As you can have seen above, Sass is so well defined to specifically reduce the pain of writing extensive CSS code, hence making it super easy for developers to code CSS for their websites by first writing the styling code in Sass and then compiling it into CSS code. This amazing syntax can save you hundreds of lines of code.

There is even more to Sass which we will learn in the coming tutorials.