SCSS /SASS- Syntactically Awesome Style Sheets that are actually awesome

If you’re interested in being a Front End Web Dev, learning how to use SCSS will make your life SO MUCH EASIER.

After browsing around the world wide web, at this point, it is pretty much a requirement from most companies have you be somewhat familiar with it and what problems it can solve for their front end peeps.

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. SCSS files use the extension .scss.

SASS, the older syntax is known as the indented syntax (or just “.sass”). Meant to be concise. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

-paraphrased from StackOverFlow-

SCSS is what’s used today.

Ohhhh but what is it?

SCSS, aka SASS (pronounced sass), is a pre-processor scripting language that will be compiled or interpreted into CSS. It adds functionality to your stylesheets through the use of variables, nested values, mixins & placeholders (blocks of code that lets you call a ‘function’ in code blocks), and so much more. It helps you organize and modularize your stylesheets, and keeps your code true to the DRY principle. Another plus is that it’s very well documented.

As a fresh bootcamp grad, you want to stay relevant in the market and continue learning new technologies. And by you, I mean me. I am a fresh bootcamp grad. I am telling this to myself. (Ok this also applies to you if you fit the above). There are so many resources online to take this on- Udemy has cool courses, so does CodeAcademy. There are tutorials on YouTube, and I’m sure you can find some good how-to’s online, or code-alongs.

Let’s get you set up!

If you are using Node.JS, on the command line, run the below to install the SASS compiler. This is what helps translate your SASS code into CSS.

npm install -g sass

If you are starting from scratch on your project, make sure you have a css file created, and an index.html. Link your stylesheet to your HTML file by typing the below in the document head.

<link rel="stylesheet" href="{NAME OF CSS FILE}.css">

Then create a SCSS file that lives in a similar area where your css sheets are. If your css file is called main.css, you should name your .scss file main.scss.

Now, you have to transpile your code. Let’s get a package.json on your project. In your working folder, run the below.

npm init --yes

The --yes flag bypasses all the default questions, and creates a file directly.

Now, you should install the compiler node-sass which translates sass code into CSS. Type the below. *Please note- the node-sass library is now deprecated. Please read below on how to use the current standard of dart-sass instead*

npm i -g node-sass

the -g tells the machine to install node-sass globally so you can use it for other projects. This may take a while.

To compile this code, in your package.json file, under scripts, type in the following:

"watch": "node-sass -o css scss -w"

The -o stands for output. The css that comes afterword is the folder where the compiling is taking place. After the css is the path for my scss file, which I also have a scss folder for. The -w watches for changes in your scss folder.

My file structure for clarity

-css
--main.css
-scss
--main.css
index.html
package.json

If you were only watching one scss file, you could also be more specific and write something like node-sass -o css scss/main.scss -w

This section should resemble this:

"scripts": {
"watch": "node-sass -o css scss -w"
}

While working on your code, and for the code to be compiled after you save it, you must run the below in your command line in your working folder

npm run watch

There you have it! You can now start writing SCSS code. After you’ve learned the basics, of course. Try to write some code in your scss file and save it. See what happens in your main.css.

Once you finish working with it, don’t forget to hit ctrl c to kill the process before you X out.

Other ways to install SASS

PLEASE NOTE* node-sass is now deprecated as of a few days ago. According to the SASS website, you should plan to move to Dart Sass. Replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.

To upgrade to the dart-sass utilization, in your command line run

npm add sass

This adds the sass to your package.json file, and then change the scripting syntax to the below (also depending on your syntax)

"watch": "sass scss/main.scss css/main.css -w"

Once you run the npm run watch command, a new main.css.map file will populate in the css folder. It gives direction from which files to read from, and where to put the compiled data. The scss/main.scss is where you are telling the compiler to read the code from. In my specific case, I used partials and imported all my difference SCSS codes there.

LibSass is Deprecated

node-sass