Introduction
It is an extension to css.
It helps us write more flexible CSS styles.
It makes use of variables, functions, conditional statements, etc.
Files can be split like modules, making it easy for large projects.
Statements of SASS is not understandable to the browser, so it needs to be converted/translated to css file.
It is written in Ruby.
Sass is like a programming language, so you must know programming fundamentals, like variables, function, conditional statements, etc.
You should know CSS.
Start using Sass
Open application Prepros.
Add/Drag your project folder.
You can see your folder name ‘Project’ with different folders ‘css’, ‘img’, and ‘scss’.
Open your editor (VS code) and open the same folder.
Create a file style.scss under scss folder.
Open prepros application and set the settings as below,
Select your scss file and do the settings as given in the picture.
Make sure to check the ‘Auto Compile’.
Once you save your file ‘*.scss’, it will compile your sass file and generate the css file defined on our output path.
Also, a popup will be shown once you save your file from editor.
Now,
Open style.scss and add the content below.
- .rule{
- color: red;
- a{
- color: blue;
- span{
- color:pink;
- }
- }
- }
Save the file you have created and open style.css. You will see the below content that is generated, once you save the scss file.
- .rule {
- color: red; }
- .rule a {
- color: blue; }
- .rule a span {
- color: pink; }
Create a file index.html under project folder.
Add contents below.
- <html>
- <head>
- <link href="css/style.css" rel="stylesheet"/>
- </head>
- <body>
- <div class="rule">
- <a href="#">This is a link. <span>text under span text.</span></a>
- </div>
- </body>
- </html>
Open index.html in the browser and you can see your class and styles applied, as pre style.css generated by style.scss.
Open the index.html in the browser and see the applied styles.