Hello, Guy's!
Welcome to CodeWithWebDev's blog.
In this blog, we will talk about SASS. If you are new to web development and have come across the term "SASS" many times but you have no idea what SASS is, then this article will help you a lot and guide you on your way to learning SASS. If you know a little bit about SASS and you want to dig deep then also this article is very helpful. So let's get started.
What well see in this blog:
6. Conclusion
1. What is SASS?
What is SASS? that's what we are here to talk about. If you are a
beginner in Web Development or even have some knowledge you might have heard
the term "SASS" or "CSS Preprocessor" many times, but you
might have no idea what it actually means. So let's see one by one what is
SASS and if you should be using it in your coding journey.
SASS stands for Syntactically Awesome Style
Sheets. In a nutshell, you can say that SASS is just CSS but with some superpowers. It is a CSS Preprocessor (we'll see what that
means as we move along) that makes many things possible for us that we
normally could not do in CSS such as Variables, Functions, Mixins, Nested
Rules, inheritance, etc. It is an extension of CSS that is used to add power
and elegance to the basic CSS.
SASS is compatible with all versions of CSS, you just need a preprocessor to convert it to normal CSS so that the browsers can understand it. In SASS you write code in a slightly modified which is somewhat similar to CSS, which is then processed into plain CSS which then browsers understand.
> Origin
SASS is a stylesheet language that was designed by Hampton
Caitlin & developed by Natalie Weizenbaum in 2016. After a few versions, SASS was extended with
SassScript, a simple scripting language used in SASS files.
The first stable version was released in March 2016.
2. What is a Preprocessor?
SASS or as people also call it as 'CSS Preprocessor'. So let's
understand what exactly is a preprocessor.
A preprocessor is a tool that is used to extend the basic functionality of a default language, by using the preprocessors own
scripting language.
It helps us to perform tasks that our Vanilla CSS cannot perform such as,
variables, functions, mixins, import, nesting, inheritance, etc.
However, as I also said earlier that browsers can only understand Vanilla
CSS, so first we need to compile the preprocessor syntax into our normal CSS
syntax only then will it be interpreted by the browsers.
3. Features of SASS
The main features of SASS are that it is very simple and easy to use and it
also saves a lot of time because we have to write less line of code and the
code can be reused on our webpage.
> Advantages
- Simple & Easy to Use
- Code Reusability
- Powerful
- Open Source
- Less time & code as compared to Vanilla CSS
> Disadvantages
- You need to put in the time to learn about preprocessors
- Code needs to be compiled
These are pretty much the disadvantages of SASS, other than that
there are no reasons why you should not learn SASS.
4. Why use SASS?
Now, the main point in hand, why should you learn SASS?
- SASS is a preprocessing language, that has its own CSS syntax.
- It is short, easy & clean.
- The code is readable and efficient & easy to maintain.
- You can create a separate SCSS file for each page and then the club is all-together.
- You don't have to repeat the same CSS code again & again in your file.
The benefits of using SASS over our plain old CSS are many, I could write a separate article on it, but for now, this much knowledge is enough for you to start it.
If you want the best answer, it is there on their website itself.
5. Resources to Learn SASS
We will only talk about Free resources from where you can learn SASS.
Learning SASS does not require more than 2-3 days. But the only thing that you should be aware of before learning SASS is that you should know all about CSS.
Before starting SASS, get all the concepts of CSS cleared because if you don't then you might face trouble will learn SASS, and it will leave you confused and will also consume a lot of time. So learn CSS before starting
with SASS.
> YouTube
1.
SASS Crash Course by Traversy Media.
2. SASS Tutorials by The Net Ninja
3. SASS for Beginners by FreeCodeCamp.org
> Websites
2.
W3Schools.
6. Conclusion
SASS is a skill that you should have, it makes your CSS life much much
easier and I myself as a developer cannot stress the fact that how much
better SASS is than using plain old CSS.
To sum it up:
SASS stand's for Syntactically Awesome Stylesheet.
SASS is an extension to CSS, it is basically a CSS pre-processor.
If you use SASS, it provides you compatibility in all browsers.
Browsers do not understand SASS so you need to have a SASS
preprocessor.
You can use the Watch SASS extension for that.
It reduces the amount of CSS we need to type.
It makes writing CSS variables, nested rules, mixing very easy.
So go for it, learning SASS is worth it and usually takes a day or
two!
Thanks a lot for keeping calm and reading this.
You know what to do and how to proceed.
You can contact me in case of any doubt or if you need assistance.
Let me know your thoughts in the comment section.
You know what to do and how to proceed.
You can contact me in case of any doubt or if you need assistance.
Let me know your thoughts in the comment section.
Follow me on:
0 Comments
Please enter relevant comment's!
Do not spam in the comment's.