SASS FUNDAMENTALS

Why should we always opt for preprocessors?

In the last few years, “CSS preprocessors” has become a popular buzzword in the field of web design, and for good reason. Before we go over the number of benefits by switching over from plain CSS to a CSS preprocessor such as SASS, let’s go over the common issues we deal with in conventional CSS.

1. No encapsulation…

In CSS programming, you’re working in a world of globals. It’s difficult to protect yourself from styling unintended things and keep things scoped as we intended. The responsibility lies on the developer to stay as organized as possible so that styling rules don’t bleed into unintended elements leading to unintended consequences.

2. No variables…

CSS does not have variables. Having the ability to toggle themes such as dark mode and light mode is much easier if styles could be parameterized.

3. Not composable…

CSS is not composable in itself. With CSS rules, we’d often have to be fairly explicit and sometimes redundant by defining rules over and over again. For instance, we usually have to go into the HTML and apply a variety of classes to get a composition. If we wanted a text field to be left-aligned and all caps, we’d probably apply two different classes.

4. Bad modularity…

CSS was not developed for the rich applications we build today. When we design applications, we typically have to think about “How do I break my files up into something manageable?” vs.“What does the browser consume?”.

Rise of the preprocessors…

• Compile to CSS
• Parameterized (variables)
• Composable
• Modular
• Plug into your existing tools