In particular, the reason for us to take a look at this is because Bootstrap itself
uses Sass for defining its source for its CSS classes.
And so if you go into customizing Bootstrap,
then you would have to work with Sass code.
Bootstrap 3, which was the preceding version of Bootstrap, used Less,
and hence, I thought it would be an appropriate thing to cover both Less and
Sass, because they are pretty much similar to each other
in terms of their capabilities and the way the syntax is defined.
The typical features that CSS preprocessors bring is the support for
variables, nesting selectors, expressions, functions and mixins.
So we will look at some of these with some examples in the next few slides.
The first thing that we'll look at is variables.
Now in many CSS classes that you define,
you might have some repeated use of certain quantities.
It might be more worthwhile if you define some variables that
hold these quantities and use these variables in defining your CSS classes.
So that's where variables come to your rescue.
Here, we'll look at both Less and Scss code.
Scss is a version of Sass,
more popular version of Sass syntax, so that's why I concentrate on Scss here.
So, if you define variables in Less,
you will proceed the name of the variable with an @ sign.
In case of Scss, you will use a dollar sign before the variable name.
And once you define those variables,
you can then use those variables when you define the classes.
As you see in the example, where we define the navbar-inverse as background,
or the carousel-item's height as variables.
Now, the advantage of defining variables at the start of your CSS class
is that there is a single point where you can update a value, and
it will automatically update all the CSS classes that use this variable.
Typically the way we use variables in programming languages.