In Web Development SCSS (Sassy CSS) files are code files used to generate CSS using the SASS compiler. CSS is the styling language used by browsers (like Chrome and Firefox) to control how web pages are presented and displayed. SCSS files look a lot like CSS, so there isn’t a large learning curve to adopt it.
SCSS adds another step to the CSS coding workflow however. Leveraging SCSS means organizing multiple files into reusable modules and including them into a master file and running that file through the SASS compiler to generate your final CSS file that will be included in your site. If you have multiple CSS files, you’ll need to compile each of them separately.
See my article on SCSS vs CSS for a detailed breakdown of these web technologies.
Why not just stick with hand coded CSS?
What are the SCSS features
Variables are a powerful way to ensure look and feel consistency and brand compliance throughout your site. Variables also make it easy to consistently apply changes. Here is an example of an SCSS variable:
$brand-font-color: #555;Other SCSS files can now use this variable instead of a ‘hard-coded’ color. For example:
.some-class {
color: $brand-font-color;
}This approach helps control the colors used in the stylesheet since all the colors can be defined in one file and linked out to selectors as variables. Colors aren’t the only settings that can be abstracted with variables, all other CSS settings are also possible, for example:
$body-font-size: 1.5rem;
$paragraph-alignment: center;
Sizes and other settings can also be managed with variables.
SCSS allows you to define selectors using a nested syntax. For example if you wanted all link text in any unordered list within a class called ‘warning’ to be red you could structure it like this:
$warning-text-color: red;
.warning {
ul {
li{
a {
color: $warning-text-color;
}
}
}
The compiled CSS would look like this
.warning ul il a {
color: red;
}If you also wanted paragraph text in elements with the warning class to be red and bold, that code would be:
.warning {
p {
font-weight: bold;
color: $warning-text-color;
}
ul {
li {
a {
color: $warning-text-color;
}
}
}This compiles to
.warning p {
font-weight: bold;
color: red;
}
.warning ul li a {
color: red;
}You can see from these examples how SCSS nesting creates an obvious relationship between styles. They are defined in a parent-child structure that matches the HTML structure where they will be used. The 2 selectors generated in the CSS do not have to be defined one after another and could be scattered around the CSS and still be perfectly valid. SCSS helps encourage keeping related selector definitions in one place.
You can also see the wordiness of CSS in this example where the class ‘warning’ is repeated. This repetition grows as selectors get longer.
The general practice in CSS is to host all the styles in a single site wide CSS file. This is the typical approach unless a site has been optimized for CSS loading or is perhaps evolving to a new look and feel and is temporarily using 2 CSS files.
Multiple developers collaborating on one file is challenging to coordinate and can result in merge conflicts and possibly regressions. A single monolithic file is also difficult to keep organized.
SCSS provides many reuse features and SCCS includes make it easier to leverage those features.
@import: variables.scssMixins are SCSS code blocks that accept parameters, they work a bit like functions that you would find in languages like javascript or python.
Photo by Marcus Ganahl on Unsplash