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.
Other popular examples include LESS and Stylus. They are in fact all great tools 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.”
Why use preprocessors?
The primary advantages are as follows:
- Cleaner code thanks to variables and nesting.
- Greater ease of maintenance and organisation 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.
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. It’s 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!
Installing SASS
Before we can write Sass code, it needs to be installed locally. As by default, it’s not a language known to the browser.
Let’s now go through the process to setup the Sass environment! So we can then write then compile our own Sass code.
Note: When Sass is compiled, it is converted into regular CSS code that browsers can interpret and render.
Environment Setup
Before we start, you must have npm installed on your computer, it comes bundled with Node.js; you can install it from here. Go ahead and install it if you haven’t already.
If you are unsure whether you have Node.js installed or not, run node -v from your terminal.
If you see a version number, it’s installed!
A note on terminal:
If you are new to SASS, chances are you may also be new to running commands from the terminal. It’s not as daunting as it might seem! And it’s a real time-saver once you gain more experience.
To open a terminal on a Windows PC, right-click the Windows Icon and select Windows Powershell, if you’re on a Mac go to Finder > Applications > Utilities > Terminal.
Folder Structure
Let’s create our project folders! They will be structured like so:
sass-project
|- sass
|- css
To create this structure, open terminal and change to the folder you wish to install the sass project into (via the cd command).
Then run the following commands:
mkdir sass-project
cd sass-project
mkdir -p sass css
File Structure
You will need an index.html and main.scss in this folder.
To create these files, run:
touch index.html
cd sass
touch main.scss
cd ..
You’ll also need a default CSS stylesheet for the SASS to compile into:
cd css
touch style.css
Open up your index.html and paste in the following code:
<!DOCTYPE html>
<html>
<head>
<title>Index page</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
</body>
</html>
This is just our boilerplate code with the stylesheet connected!
Initializing our Project Directory
All projects that use npm need to be initialized. To do this, ensure you’re still in the sass-project folder and run the following command:
npm init -y
This will create a package.json file for our project. We’ll be learning more about the configuration of this file later in the course!
Install node-sass
node-sass is the library which allows us to compile .scss to .css.
Run the following command to install node-sass as dev dependency.
npm install node-sass --save-dev
Note: A dev dependency is only used in the build phase of our project. It’s not included at runtime.
Compiling Sass Code to CSS
Next, we need to create an npm script to run the compilation.
Add this script inside the script section of our previously created package.json file:
"compile-sass": "node-sass sass/main.scss css/style.css"
Don’t forget to separate each script with a comma!
We have here specified main.scss as our main Sass file and style.css as the compiled CSS file.
To compile our SASS code into CSS, all we need to do is run:
npm run compile-sass
Live Reload
Let’s also add a live reload to our project! To do this run the following to install globally:
npm install live-server -g
Now, make sure you’re still in the Sass project folder, and run:
live-server
And just like that, you’ve got a pretty neat dev environment with your project running locally on HTTP.
You’ll need to keep live-server and npm run compile-sass running in two separate terminal windows.
So we now have the project environment all set up on the local machine :)
That's all for today! In the next one, I'll be taking a look at the features of SASS in detail.
Are you ready to turn your dev skills into a freelance business? Whether you're completely new to freelancing or are looking to level up your existing skills. I'll teach you everything you need to know to become a successful freelancer!
Get started today with my Complete Guide to Freelancing.
Available now at 👉 https://easeout.gumroad.com/l/freelance
A little about me..
Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author.
I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. If you'd like to read more of my articles, check them out on my blog.
Thanks for reading 🎉
Top comments (2)
Really nice introduction! I’ve been wanting to learn SASS so I’ll be looking forward to the rest of the series :)
Thanks Megan! I’m planning to start posting more frequently - starting with this SASS series! Stay tuned :)