When you’re a new learner in frontend development you may don’t know about SASS. Many designer don’t know about SASS. It’s not necessary for designing and HTML template. But it’s a powerful component for designers. SASS saves designers lots of time. That’s why you have to know and learn SASS.
If you want to learn SASS you may follow their official documentation. But sometimes, you may don’t understand properly. It’s the best practice for a developer who is learning. Many learners can’t understand the documentation properly.
In this article, I will say you about what is SASS and how it’s working with CSS. I will try to say details about SASS and will describe step by step. So, I hope you will be clear about this after reading this article. So let’s start talking about SASS.
What is SASS?
Many people asked this question. SASS is a preprocessor. This processor system develops via Ruby. Ruby is the popular computer programming language. What does the pre-process in the style sheet? Now I will give you an example of water. Suppose, you have a glass of water. But it’s not contaminated. That’s why it’s unsuitable to drink.
But you have only a glass of water and you have to drink this water. What do you in this situation? You maybe try to do for suitable to drink. You may boil this water. So, you can drink this water. Like that we need to pre-processed our code into the stylesheets.
SASS is a system where you can write CSS code with some formalities. It will provide you fully validated and structured CSS code in your style sheets. You don’t need to maintain the CSS standards when you are writing.
How does it work?
As I mentioned above, it’s a pre-processor. First of all, you have to create a new file for SASS which files extension will be .scss. When you will be writing your code in .scss file, the system will be judge all your written code. After judgment, if all code is correct and decorated, the system will be sent to the CSS files.
Before this process, you have to install SASS in your local computer where you will be coding. Then you have to go to your project directory using Command Prompt. Once you will be going to the project directory using Command Prompt type following command by replacing your project and file name.
sass --watch yourfile.scss:yourfile.cssIn the above command replace with your file name. If your file in another directory you can write below command for your project.
sass --watch folder/yourfile.scss:folder/yourfile.cssAfter writing this command just press enter to execute the command. You will see watching the message in Command Prompt. Some people’s asked that is it able to use with Bootstrap. Both are different things. So, you can use it with Bootstrap.
I hope you can understand this article very much. May you also interest in How to Create Triangle on HTML Template.
