An Introduction to SASS for Beginners

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. CSS preprocessors are scripting languages that extend the default capabilities of CSS.

It is a great tool to utilize when you wish to code more maintainable CSS, especially when working with larger codebases.

Defining CSS Preprocessors

“A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain”. — MDN.

Once you’re comfortable with CSS, the next natural step is to utilize a preprocessor. The biggest advantage is not having to repeat yourself.

This advantage is known as keeping your CSS Dry, which stands for “Don’t Repeat Yourself.”

Note: If you're new or struggling with CSS, be sure to check out the CSS Series where I've compiled a list of written blogs about everything CSS.

Why use preprocessors?

The primary advantages are as follows:

• Cleaner code thanks to variables and nesting.
• Greater ease of maintenance and organization as we can separate our files into modules.
• Ability to implement logic and calculation in our stylesheets.
• Overall improvement in workflow, which will save hours of development time!

Of all the preprocessors, SASS is by far the most popular within the developer community in my opinion.

What is SASS?

SASS is a scripting language that provides us with features and tools that regular CSS doesn’t have.

Using SASS we can write more readable, maintainable, and reusable code. Think of it as an extension that adds power and elegance to CSS.

It gives us various features such as:

• Variables
• Nesting
• Mixins
• Functions
• Partials & Imports
• Inheritance (Extend functionality)
• Control directives

In other words, SASS helps us organize large stylesheets in a more maintainable way.

And we’ll be looking into all of these features throughout my next series of articles on SASS!

SCSS or Sass?

In SASS there are two different syntaxes: SCSS and Sass. However, after being compiled they generate similar output.

SCSS (aka Sassy CSS) is the modern standard. Its syntax is very similar to CSS in that it uses brackets and semicolons. Even normal CSS is valid in this syntax. The file extension is .scss.

Sass is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules. It has the file extension .sass.

Throughout this series, I will use SCSS as it’s the more natural syntax (when we use SCSS we still call it SASS!).

It’s also really easy to convert regular CSS to SCSS, as you can just paste in the CSS and work from there!

Example of SASS being used in real-life projects:

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!

🌎 Let's Connect

• Portfolio

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen