sass:
SASS is a pre-processor of CSS. The code is most beautiful and optimized when using it. SASS is written without curly brackets [{}], SCSS is written with curly brackets [{}].
Mainly SASS can be installed in two ways.
- LIVE SASS COMPILER.
- node package modules (NPM).
If you do it with the best NPM and with COMPILER, it will not issue browser support.
Now let's see how to install SASS?
first Method:
First come the compiler, now the code editor VS Code is very popular for coding. Go to its extension and install LIVE SASS COMPILER. Then create a file, create html and SASS file and turn on LIVE SASS COMPILER.
The second method is:
With Node Package Module (NPM):
First you have to go to the terminal and select the correct file.
You have to give the command
> npm init - Enter
> npm install / i sass -D (developer) Enter
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"Format":"expanded",
or
"format":"compressed",
"extensionName": ".css",
"savePath":"/sass"
}
],
Go to the format option [compressed]> convert the code into a small file / [expanded]> the code will show the output exactly as it is written.
Once installed, go to the Jason file and type in the crypt option ("...")
Another is to extract the SASS file from the settings and set them there.
"scripts": {
"compile-sass": "sass style.scss style.css -style compiler --watch --no-source-map"
},
When you go to see the code manually you have to give the command in the terminal, when the code changes you have to give the command every time to see which is very paramatman. A nice solution is to turn on the WATCH option. For that, the crypt file first has SASS which refers to the main topic then there is the name of the compiler (you can name it as you like)> then when the code is compiled its place> there is code to indicate that it will not be compressed or expanded> atchwatch which makes the code live> No source map commands.
(--watch)
If you want to SASS beautifully, you have to learn these:
- Variable
- Operators
- Extension / Inheritance
- Rules
- Value
- Modules
- Nesting
- Mixin
- Much more
Wrapping Up
I hope you enjoyed the article, if yes then don't forget to press ❤️ and Subscribe. You can also bookmark it for later use. It was fun to create this article and If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by giving me stars on GitHub Profile.😊👇
G i t h u b
P o r t f o l i o
L i n k e d i n
Top comments (0)