CSS stands for “Cascading Style Sheets,” the language for styling HTML documents on the web. SCSS is a special type of file for Sass, which stands for “Syntactically Awesome Stylesheets,” a CSS pre-processor written in Ruby.
A CSS pre-processor, if this is the first time you’re coming across the term, is software that lets you generate CSS stylesheets using its own syntax. Specifically, Sass positions itself as a CSS extension language that lets you churn out more CSS code with less typing.
To put it all together, SCSS files are the files that you load into Sass—and that the Sass pre-processor uses to generate CSS stylesheets. SCSS files are read by Sass and used for generating CSS files; CSS files are read by browsers and used for styling HTML documents.
Fun fact: The other name of SCSS files is “Sassy files.”
Why Use Sass?
If you’ve never used a CSS pre-processor before, you may be wondering: Why would a web developer want to use such a thing at all?
The long answer short is that Sass has many features that CSS doesn’t have—at least not yet. Those features make it easier for you to generate CSS style sheets for your HTML documents, especially for large projects with a high level of complexity.
You can think of an SCSS file as a turbocharged CSS file that the Sass pre-processor takes and turns into W3C standards-compliant CSS style sheets. It’s everything you ever wanted to have in the CSS syntax by default.
Sass Features
So what is it about Sass that makes it so attractive to web developers who want to do more with less when it comes to their CSS code?
While I can’t speak for others, I can tell you about my favorite features of Sass—and how writing SCSS files helps me output better CSS files, faster.
Those features are nesting of CSS selectors, inheritance of CSS properties (but not in the way that inheritance works in CSS, if you are familiar with that), and CSS mixins.
CSS Selector Nesting
Sass lets you nest your CSS selectors in a way that’s very similar to how you would nest DOM elements in an HTML document.
For example, if you have an SCSS file that looks like this:
article {
h1 {
font-size: 42px;
}
p {
font-size: 16px;
}
}The Sass pre-processor will take it and turn it into a CSS file that looks like this:
article h1 {
font-size: 42px;
}
article p {
font-size: 16px;
}CSS Property Inheritance
Instead of copying and pasting CSS properties from one rule to another in your style sheet, you can use Sass to create placeholder classes that contain a set of properties to reuse across rules.
Here’s how CSS property inheritance works in Sass:
- To create a placeholder class in your SCSS file, add the % character to the start of the selector.
- To make a CSS rule inherit the properties of that placeholder class, add a property starting with
@extendand the name of the placeholder class in question.
To show you how this works in practice, an SCSS file with the following contents:
%heading-defaults {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.25em;
}
h1 {
font-size: 42px;
@extend %heading-defaults;
}
h2 {
font-size: 36px;
@extend %heading-defaults;
}
h3 {
font-size: 32px;
@extend %heading-defaults;
}Will turn into the following CSS file:
h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.25em;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}Note that Sass also determines the most compact and computationally efficient way to output the inherited rules in your CSS stylesheet, making your HTML documents load faster.
CSS Mixins
A CSS mixin is like a JavaScript function, but in CSS.
With CSS mixins in Sass, you can create a CSS rule with variables. As you reuse that CSS rule, you can pass on values to those variables so that you can reuse it in a dynamic way.
For example, the following SCSS code:
@mixin theme($background, $color) {
background: $background;
color: $color;
}
.light {
@include theme(#fff, #000);
}
.dark {
@include theme(#000, #fff);
}Will make Sass generate the following CSS style sheet:
.light {
background: #fff;
color: #000;
}
.dark {
background: #000;
color: #fff;
}I can go on and on about my favorite features of Sass, but I’m sure you’ve already gotten the picture.
If you master CSS, as any other CSS pre-processor, you can take your web development to the next level with well-written and well-formatted CSS files that take less time and less effort to write.
Can You Mix CSS and SCSS?
If you’re new to CSS and SCSS, you may be wondering if you can mix CSS rules and SCSS rules in the same file.
The answer is yes, you can mix CSS and SCSS rules in the same file, as long as you do so in the file with the .scss extension. The Sass pre-processor will then take that file and output a valid, W3C standards-compliant CSS style sheet for your project.
However, don’t try to add SCSS code to a CSS file. Remember that the Sass syntax can only be used as input to the Sass preprocessor so that it can generate a CSS file. Browsers don’t understand it, so your HTML document will appear broken.
In Conclusion
There are many reasons to use a CSS pre-processor. And there’s little doubt that Sass, which has been around for a while, is one of the best of them.
What’s interesting is that, with time, the standard for CSS style sheets is getting increasingly closer to that for SCSS files (and those of other CSS preprocessors).
These days, for example, a CSS style sheet can have variables and contain basic mathematical calculations, just like the variables and the math operators in SCSS files.
And yet vanilla CSS doesn’t have it all. And if you work on projects where you’ve wished you had this or that in the CSS standard—and Sass delivers on your wishes—you might just want to give this free and open-source tool a try.
