Joshua Mendoza
JfuseCodes

JfuseCodes

Getting Started with Sass

Joshua Mendoza's photo
Joshua Mendoza
·Jul 8, 2022·

3 min read

Getting Started with Sass

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Sass and SCSS
  • Setting Up Sass
  • Until Next Time

Sass is CSS with extended functionality. It can help speed up coding and organize stylesheets. That would mean CSS is a prerequisite to writing Sass. Using Sass, as I have mentioned before, has many benefits. Cleaner code, reusability, excellent documentation and tutorials come to mind.

Sass and SCSS

Sass and SCSS are the same. The differentiating factor comes from syntax. This is Scss, which is the exact syntax of CSS.

scss-syntax-demo.png

This is Sass, the new syntax which is optional to use and known as the indented syntax. This syntax provides code that is easier to read by omitting curly braces and semi-colons. The file extension must be .sass to use the indented syntax.

sass-syntax-demo.png

Setting Up Sass

How to use Sass/SCSS in your project

Integrating Sass into your project can be confusing at first because of a few extra steps beyond a CSS file. But as stated before, any SCSS code you write is valid CSS. But the browser does not read Sass/SCSS. So how do we get the browser to read our preprocessed code?

It's simple... You Don't! We must compile it into readable CSS code that the browser can work with. Luckily, Scout-App, which requires a download and installation, can solve that problem.

Folder Structure

I like to keep things organized, no matter how few files there may be. So as far as styling sheets go, my usual optimal folder structure goes like this:

project--folder-structure.png

A separate Sass folder within the main project folder holds all Sass/SCSS files. A separate Style folder that would hold any CSS files.

Creating the Sass or SCSS file

Inside the Sass folder, we can create a sass file by having the file's extension be .sass. Further, we can also create an SCSS file using the .scss extension. I tend to use the .scss extension. The CSS syntax is so ingrained in my muscle memory that I have decided to stick with it. But if you select .sass, Scout will also compile Sass into CSS.

project--folder-structure_uncompiled.png

Using the Scout App

After the Scout tool installation, open it up, and you will see this welcome page.

scout-app--landing.png

Add the project(s) that you are working on. This excellent tool should select the input and output folder with its correct file path. The Sass folder should be the input, while the Style folder should be the output.

scout-app--input-output.png

Afterward, click the play button.

scout-ap--play-button.png

This play button tells the tool to watch for changes in the sass/scss file. It takes the Sass or SCSS code as input and compiles it to a new CSS stylesheet which will appear in the Style folder. This play button tells the tool to watch for changes in the sass/scss file. It takes the Sass or SCSS code as input and compiles it to a new CSS stylesheet which will appear in the Style folder. The name of the new CSS stylesheet should be the linked stylesheet within the index file.

project--folder-structure_compiled.png

In regards to this example, the link tag's href attribute in the HTML's head should be "main.css".

html--head-link.png

Green indicates the compiling was a success.

scout-app--green.png

Red indicates an error within the SCSS/sass code that needs a change for compiling to progress.

scout-app--red.png

Until Next Time

So this was a simple introduction to including Sass in your project. No specific syntax, but only the general difference between the syntax of Sass and SCSS. Following the steps laid out in this article, writing any form of CSS within the Sass or SCSS file is valid Sass. Stay tuned and come along the journey as I dive deeper into Sass. This is a powerful and optimal tool that I urge developers to pick up for an excellent front-end workflow.

Did you find this article valuable?

Support Joshua Mendoza by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this