If you’re working on becoming a Front-End Developer, then you may already be familiar with HTML, CSS, and JavaScript as must-have skills.
But these aren’t the only useful tools for Front-End Developers. Many people who learn CSS go on to learn Sass for more efficient and consistent web design, especially for large, complex web development projects.
In this article (and in the video below), we’ll go through the basics of Sass — what it is, why people prefer it to pure CSS, how it works, and some of its more popular features.
What is Sass?
Sass (Syntactically Awesome Style Sheets) is an extension of CSS. Style sheet languages control where and how text appears on a webpage, from frame size and color to menu positions.
CSS is used all over the web, but that doesn’t make it the smoothest coding experience. It was designed to help developers write instructions on how to present text on a screen rather than to work with variables or perform complex decision-making tasks.
As you’ll find out, Sass addresses some of these serious shortcomings of CSS, saving developers time and effort on projects.
Why use Sass?
If it takes time and effort to learn Sass, why bother if you can do the same thing with CSS? There are a few major reasons why developers find learning Sass to be a worthwhile investment.
Sass code is more organized compared to CSS
While CSS and Sass theoretically have the same capabilities, Sass can do the same job using less code. That makes Sass code much easier to read and understand, particularly in large web projects involving multiple developers.
Sass syntax is easy to learn
If you already know CSS, then you’ll be relieved to find that a lot of Sass syntax is identical to CSS. While there are a few key differences between the two, most developers who already know CSS can pick up Sass after taking a brief course.
Think of Sass as a programming “dialect” rather than a whole new language.
Sass code is reusable
As you’ll learn in a moment, Sass allows for variables and chunks of code that can be reused over and over again. This saves developers a lot of time and reduces the risk of coding mistakes. It also makes it easier and faster to change styles in multiple places in your code, such as frame sizes, border styles, colors, and so on.
Sass is stable
Since its release in 2006, Sass has been supported by its core developers as well as large tech companies. As a result, Sass can be considered a mature yet up-to-date language.
How does Sass work?
Sass is a preprocessor language that’s interpreted into CSS. A preprocessor language takes input data and converts it to an output that’s used as input by another program.
This means when you run Sass code, you’re actually converting your code to CSS. That CSS code output is then used directly by a browser.
Why have this extra step of converting from Sass to CSS? Because browsers can only read CSS code.
Now that you understand how Sass works and why so many developers love it, let’s take a look at four features of Sass that make it so attractive.
Features of Sass
As you might be thinking, the way Sass works means there’s nothing you can code in Sass that you couldn’t code directly in CSS. But Sass includes a few distinct features that help developers code much more quickly and efficiently.
Sass has variables
If there’s one thing developers hate, it’s repeating themselves. Suppose that you’re creating a website with many pages. Of course, you’d want the different pages to look and feel connected by having consistent color schemes and fonts.
In pure CSS, you’d need to call out the colors and fonts on each page. Every single time. And, if you wanted a new color scheme, you’d need to go back and manually edit the colors and fonts in your CSS script. Every. Single. Time.
With Sass, there’s a wonderful solution. Sass allows you to define variables so you can easily change key values later, such as color, font size, and borders. Instead of retyping changes over and over in CSS, you can simply change the value of your variable of interest in Sass.
Sass Mixins save even more time
With Sass, not only can you define variables, but you can also package groups of variables known as Mixins. For example, if most of the pages on a website use the same fonts, colors, and border schemes, you can define a Mixin that includes all of these values.
In future web pages, all you need to do is call out the Mixin rather than remembering to individually call the font, color, and border values.
Inherited and extended properties
When you want to make parts of your website a bit different from the template, Sass still saves time. Say you want a page on your website that looks mostly like the other pages but with something new, like a new type of header.
Rather than redefining everything from the beginning, Sass allows you to keep or inherit the properties of a Mixin and add individual values as needed. So, using Sass, you can quickly import the fonts and colors you defined in an earlier Mixin while adding properties for that new header.
Sass functions
If you’re already familiar with other programming languages such as Python, Swift, or Ruby, then you’ve probably created your own functions before. Functions accept inputs from the user and run through specific lines of code to perform complex operations.
Many programming languages come with built-in functions, such as functions that calculate averages and string lengths. But, suppose that you have a very specific need, such as separately calculating the word count in every frame of a page.
Rather than coding in individual instructions on every page, Sass functions allow you to code in the instructions once. Later on, it’s easy to call your function to perform the same task as many times as you need to.
Sass helps CSS work more like a programming language
There’s still hot debate on whether CSS counts as a full programming language. But, no matter where you stand on the topic, it’s easy to see that CSS was designed to provide instructions on how a web page should look rather than to perform decision-making tasks and work with variables.
While everything done in Sass can be done in CSS, Sass helps you, the developer, write code in a way that looks and feels like a programming language.
SCSS: sassy syntax
As you learn Sass, you’re sure to come across SCSS, which stands for “Sassy CSS.” Sass can be written with two types of syntax: the original indented or newer SCSS. The original syntax uses indentation for nesting and provides a visual hierarchy in the code, similar to Python or Ruby but unlike CSS.
SCSS, on the other hand, uses syntax identical to CSS, with curly brackets to indicate nesting. The advantage of SCSS is that you don’t need to convert an SCSS file to CSS since all SCSS syntax is also valid in CSS.
It’s also easier to learn SCSS syntax if you’re used to CSS already. While SCSS syntax looks more like native CSS, both SCSS and the original Sass syntax can perform the same functions in Sass. Both syntax styles allow you to use variables, Mixins, functions, and other features not available in native CSS.
Who should learn Sass?
Anyone interested in becoming a Front-End Engineer can benefit from learning Sass. Along with HTML, CSS, and JavaScript, Sass is a great way to help you stand out to potential employers.
Remember that Sass is, above everything, a way to write CSS code more efficiently. Knowing Sass is a signal to hiring managers that you can get the job done more quickly and have the skills to work on large, complex web projects.
How to learn Sass
Because Sass is so closely tied to CSS, we recommend that you learn CSS before learning Sass. That way, you’ll be able to directly build on your previous knowledge and skill as you learn how best to use Sass to save you time working in CSS.
Once you feel comfortable working with CSS, then it’ll be relatively easy to learn Sass.
Jump-start your developer career by learning Sass
Anyone looking to begin their career as a Front-End Developer would benefit from learning Sass to supplement their knowledge of CSS. But what about after that? We recommend taking a more advanced CSS course to help prepare you for the most complex web development projects.
Still not sure what direction you’d like to go in your development career? Our Career Paths help you decide with descriptions of each Path and which skills you should start learning to help you succeed as a developer.
