SASS for beginners

Beginners Guide to SASS

SASS has become a useful tool for web developers because it is a way to simplify our CSS workflow and make it friendlier. For example, thanks to SASS we can change or replace particular properties of elements in an easy and fast way.

SASS stands for Syntactically Awesome StyleSheets and it is a preprocessor, a scripting language that extends CSS and allows writing code in a language and compiles it into a CSS file. Other examples of preprocessors are LESS and Stylus.

Syntax

There are two options for syntax in SASS:

1.- SCSS (Sass & CSS): This syntax is built on the existing syntax of CSS, and just like CSS, it uses brackets and semicolons, but in this case, SCSS doesn’t care about indentation levels or blank spaces.

Pros of SCSS syntax

One of the advantages of SCSS is that it allows us to nest selectors within selectors. This is especially useful because when you have to change the “name” of an element you will just have to do it in one place (the outer selector).

2.- Sass Indented Syntax (SASS): Unlike CSS, instead of using brackets to delimit blocks of styles and semicolons to separate statements, the SASS syntax uses indentation and line breaks. This allows the coder to use less amount of text.

Pros of SASS syntax

The indented syntax does not use semicolons and brackets
and therefore the SASS syntax is more concise and easier to read, besides it doesn’t complain about missing semicolons.

/* SCSS */
$grey: #c1c1c1;
$margin: 16px;
.content {
border-color: $grey;
margin-top: $margin;
}

/* SASS */
$grey: #c1c1c1
$margin: 16px
.content
border-color: $grey;
margin-top: $margin

/* CSS */
.content{
border-color: #c1c1c1;
margin-top: 16px;
}

Variables

Variables are used to store information that will be used through the stylesheets. They are very useful in order to save time rewriting code and when it is needed to change a property in different places, for example a background colour, sizes, fonts…

How do variables work?

In this example font style and colour are stored in two variables. In case it was needed to change these features, it would be done simply by changing it in the variable. Note that every other place in which the variable has been introduced will change as well.

Mixins

Mixins are useful to store different variables or parts of code that repeat themselves.

In this example we can store two different variables together in a mixin. Then we can incorporate these styles together by simply adding ‘@include ‘ and the name of the mixin followed by ().

Imports

In our scss, we can create different partials so that our code looks tidier.

In order for SCSS to work, we import all of these partials in our main.scss file. As shown in the image, the order in which we include the files is very important.

For example, core files have to come first so that the rest works perfectly.

Thanks for reading and we hope it helped a little! :)

Related posts:

Of course you knew this! Drink enough water keeps you hydrated throughout the day. It helps to stay healthy inside as well as out side of your body. Nowadays bed times are scary times. Where we can…

Over 1700 prompts for Financial Accounting, Cost Accounting, Auditing, Managerial Accounting, Tax Accounting, Forensic Accounting, Fund Accounting, and more