CSS (Cascading Style Sheets) is a web language that describes how HTML elements are displayed from mobile, table to pc screen. Using CSS is just like adding colorful accessories to the structure of the written code on visual studio code.
With CSS it makes text larger / smaller, the position of the background image, neat heading, and adds paragraphs into a new line. The syntax of CSS is described below
h1 {
color: aquamarine;
font-size: 3em;
}
Legends :
h1 : selector color and font-size: property aquamarine and 3em: value Each set of property and value is the Declaration. All CSS declaration is separated with semicolons ; , the group of the declaration is surrounded by curly braces { } .
In developing the web, we usually apply the principle of DRY (Don't Repeat Yourself). A complex project might have lots of elements, navigation, and section needed to have the same color. And it is likely to get overwhelmed especially for maintenance. Web developers, therefore, can now rely on using SCSS
What is SASS ?
SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets developers create variables, nested, operations, mixins, loops, functions, imports, and other interesting functionalities that are fully compatible with CSS syntax.
Let's compare the difference between SASS and CSS
Source: Sass - Css
From the left, we can see that Sass has omitted curly braces and semi-colon. The reason why it's done like this is to prevent the careless developer from making too many mistakes doing maintenance. Most time taken for debugging the code is one semi-colon, and it is very frustrating. With Sass, this minimum error can be prevented. Besides, omitted curly braces are also another good move to make the coding faster.
Besides this basic syntax, there are a lot of new shortcuts you may learn to improve the performance of the coding. For more information, you may refer to the official site of Sass Language..
There are many benefits of using Sass.
Variable. We can create a variable to store a set of values and reuse it many times in the sass files. So it is easy and convenient. Imagine developing a complex webpage with many buttons, icons, and containers. We can replace the similar style with one variable only to develop it and the color and style are uniforms.
Nested. With Sass, we can group the selector with one nested for easy maintenance, this is the DRY principle we discussed early on. And the code file will be very organized and easily maintained in the long run.
Separatable. As the webpage keeps growing, it is very hard to refer back to the CSS code or maybe you need to buy a bigger and longer screen just to refer to the code being written. You can save money by purchasing a new screen by separating all Sass files into several parts. It also allows HTTP requests to respond faster to the client.
To consider learning a new framework is not easy especially since we need time for commitment. Focusing on new things will lead to delays in the main task especially since Sass has many syntax. So it is advisable to take into consideration whether it is worthwhile to learn and apply to real projects.