Levels that can be learned:
- 30 minutes reading the docs can find out
Is it necessary:
- VERY NECESSARY
Advantages :
- Managing css has never been this easy
- Ease of maintenance, project expansion
- Easy teamwork, avoid code conflicts
- Code 10000% faster
Defect :
- Need dev to have experience to build a reasonable structure (fix = how to get on github from another dev)
- Encounter some cases that should not be when coding
Let’s start !!
- Goals ?
- What is SCSS?
- The use it in real project
1. Target set
[*] This article is intended to introduce SCSS to beginners, so in this article, I will limit mentioning the code, but only share my sharing about how I use SCSS. Gets go!!
2.SCSS
Link to the homepage: https://sass-lang.com/guide
[*] Scss is the precompiler that turns your code into CSS . Thanks to this it makes SCSS much more powerful than CSS
[*] You can imagine :
- CSS: CSS wallet is a gem you will sell to customers, your code on css is like not going through a machine, but you directly override that stone and edit it, it’s okay to be beautiful but it’s okay to be ugly..
- SCSS : And SCSS is like a chassis you build to edit that gem in the most beautiful way when it comes to the product.
[*] If you find it difficult to understand, let me give you an example
Oh ! according to the above example you can see when you write SCSS it will automatically generate a CSS file for us and we use it but wait is it on SCSS we can do addition
3.How to use SCSS in the project
[*] Depending on the case, we will have different uses such as using SCSS with HTML/JS, in ReactJS/VueJS
In the next article, I will introduce you to the SCSS file structure so that you can pull it back and use it in the best possible way.