Sass Script and Expressions

As we have already seen how Sass/Scss simplifies the whole process of writing CSS code by providing a lot of new features in syntax, in the form of variables, built-in functions, etc. Although Sass is not a full-fledged programming language apart from the above feature it also supports writing simple script/expressions which are evaluated when Sass code is compiled into CSS code.

When we say expressions, we mean simple arithmetic operations can be carried out using SassScript and we can also use built-in functions available in Sass. We will learn more about operators, various data types that can be used in Sass code and various built in functions that will make the process of writing the stylesheet code very simple.

Sass Expressions

Simple expressions involving operations like addition, subtraction, multiplication, etc can be used in Sass code. For example,

$text-size: 15px;

#normal-text {
    font-size: $text-size;
}

#large-text {
    font-size: $text-size * 1.5;
}

As you can see in the code above, we have used the multiplication operator.

Sass Functions

There are many functions available in Sass by default, like the darken() function we saw in the introduction tutorial for Sass. These functions provide readymade ways to perform certain important actions in styling like darkening a color, lightening a color, creating Hexa code for a color using the rgb() function, etc.

Here is the example Sass code using the darken() function to darken the purple color for the hover effect of the button.

$purple: #6A67CE;
$darkpurple: darken($purple, 15%);

.purple-btn 
{
    text-align: center;
    background-color: $purple;
} 
.purple-btn:hover
{
    background-color: $darkpurple;
}

Conclusion:

In this tutorial, we saw how Sass is different from CSS and more like a programming or scripting language as you can write a lot of dynamic code that is compiled into CSS.