What is SASS / SCSS?

Concept

What is sass

Sass stands for Syntactically Awesome Style Sheets , a preprocessing CSS language. Your Css syntax will be written as Sass, then will be compiled through Css.

There are many types of CSS Preprocessor:

• Sass
• Stylus
• Less
• ….

In this article I will introduce Sass.

What is scss

Sass itself has 2 types of writing, scss is the style of writing created after. One style has a .sass extension, the second is a scss with a .scss extension.

How to write sass :

How to write scss :

both render css

Sass utilities

• It has been a long time and has been widely used
• Save time Css code
• Has a large community
• High css compatibility.

Sass writing rules

I prefer to use Scss over Sass, because the syntax still retains curly braces (similar to Css’s syntax) so it is easy to understand.

Nested Rule

For example, I have a html paragraph

With pure Css syntax, we will have to write the following

However, we can skip the need to rewrite the order of the tags when styling with scss

Variable

Allows us to define variables, convenient when defining fonts, common typefaces in a project.

Variable in Sass has different scopes: global and regular scope

For example:

Card

will be red, not blue.

If you use the global scope as follows, then <p> will be green

Mixin

In sass, @mixin allows us to create code that can be reused.

@include allows us to directly include the code we have created using ** @mixin **

For example:

Mixins can include other mixins or pass variables into mixins

Extend

@extend allows us to share a css style set with other elements.

When compiled into css

Import

@import allows us to include the contents of one file into another file

Css imports invoke HTTP requests every time they are imported, while sass @import implements imports in CSS, improving performance.

For example:

style.scss

main.scss

Sass partial

By default, Sass will compile all files via css. However, when importing in sass , we do not need to compile via css. So we can use partial to skip compiling via css. The syntax is to add “_” before the file name.

For example:

_style.scss (will not be compiled via css)

Conclude

When working on a project, having to write sass is inevitable because sass is very popular nowadays.

Sass has many syntax utilities that allow us to reduce code time. Thanks for watching the article.