Getting Started with SASS. Learn SASS from this series of tutorials
What is SASS?
SASS is one of the most powerful, stable and professional CSS supersets in the World.
What does SASS means?
- Sass fullform is Syntactically Awesome Stylesheet
- Sass is an extension to Cascading Style Sheets (CSS)
- Sass is a powerful CSS pre-processor
- Sass is fully adaptable with all versions of CSS
- Sass diminshes css repetition and therefore increases productivity
- Sass was developed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
- Sass is opensource.
Why Use Sass?
CSS Stylesheets are getting bigger, more complex, and cumbersome to manage. This is why a CSS pre-processor can help in making the CSS stylesheet smaller, less complex and easier to manage, thereby making the life of the designer easy and empowers them to leverage advanced styling concepts in their website and web development projects. Sass is enriched with features that are not presently available in the normal CSS stylesheets. Features like variables, nested rules, mixins, imports, inheritance, built-in functions, and other vital features make SASS one of the most powerful CSS preprocessors in the world.
What you should know before learning SASS?
Before getting started with an SASS preprocessor one should have at least intermediary expertise or exposure in HTML and CSS. Without the knowledge of HTML or CSS, it is not possible to learn SASS and implement it in your projects. So, if you want to learn GTML and CSS you can check out tutorials from W3Schools and learn the basics and intermediate level. Once you have intermediary knowledge in HTML and CSS, you can easily learn SASS from these easy tutorials
Learn the benefits of SASS:
CSS Compatible:
SASS is compatible with all versions of CSS. Compatibility makes programmers integrate with the project seamlessly.
Feature Rich:
SASS is full of unique and problem-solving features which makes it a one-of-a-kind CSS preprocessor in the World.
Most Approved:
SASS is approved globally by several companies and programmers. Many developers use SASS as the standard preprocessor of CSS.
Community:
SASS has enormous community support which includes thousands of developers and thousands of web companies.
Extensions:
SASS has two extension formats
- .sass – Older SASS extension and uses indented syntax. After processing, it changes to standard CSS.
- .scss – Sassy CSS and is a relatively new extension. All proper CSS stylesheet is also a valid SCSS stylesheet.
How to process SASS
It’s not possible to integrate SASS or SCSS stylesheets directly into the website or web application projects. SASS or SCSS is processed to become a valid CSS file and then integrated into the project. There are several ways to go about processing SASS or SCSS to CSS. We are going to discuss only the free tools/plugins to process SCSS
Desktop Application:
There are several paid desktop applications that help in processing SASS or SCSS to CSS; however, there is one free application that does the job well and is available in all operating systems, i.e., Scout-App. You can install the Scout-App from the following URL.
VS Code Extension:
The easiest way to process SASS or SCSS is to use open source Text Editor – Microsoft Visual Studio Code and use the available Live SASS Compiler and Live Server extensions in the Extension Store. After typing the valid SCSS or SASS styles, you can click the Watch SCSS button in the bottom part of VS Code. Every time, we add a new line of SCSS, the extension processes it and creates equivalent CSS in the .css file that the extension self creates. We can directly add the generated .css file to our web project.
You’ll learn SASS features such as Maps, Variables, mixins, nesting, partials, functions, theming, extensions and operators in the next tutorial