SCSS vs CSS

What is Sassy CSS and how does it accelerate CSS development

Seann Hicks

Seann Hicks

Sunday, April 26, 2020

SCSS vs CSS

Simply speaking, web pages are coded with HTML and CSS. CSS stands for ‘Cascading Style Sheets’ and is the syntax used by web browsers to style web pages, SCSS stands for ‘Sassy CSS’ and is the syntax for SASS, or ‘Syntactically Awesome Style Sheets’. Sass is a CSS preprocessor that extends CSS by providing additional abstraction capabilities and ‘transpiles’ into CSS.

SCSS is a specific syntax of Sass. Originally, Sass was defined as an indented language (where indentation helped determine blocks like Python) and was loosely based on HAML. The original Sass was confusing for developers and lead to the creation of the modern version of Sass, SCSS. “Indented Sass” is used to refer to the original Haml based syntax.

The Sass language is made up of both indented Sass and Sassy CSS, and both are supported today. Indented Sass files use the .sass file extension and Sassy CSS files use the .scss extension. Indented Sass has no parentheses or semicolons, whereas SCSS does.

CSS Preprocessing

Scss files must be translated to CSS once they are written. This process is known as ‘transpiling’, which is a mash up of ‘translating’ and ‘compiling’. Sass is not the only CSS preprocessor, there is also LESS and Stylus, but Sass is the most popular.

Coding Graphic

Why use Sass?

Sass has a few advantages over raw CSS. These include:

Sass Preprocessors

The first SCSS preprocessor was written in Ruby. But this implementation has reached end of life and has been superseded by Dart Sass. Dart Sass is a complete rewrite of Sass using the Dart language and transpiles Sass much faster than the original Ruby version. Sass is a command line tool and works like other command line compilers.

sass my-sass-file.scss [output.css]

Installing Sass

Linux

Download the appropriate binary for your host architecture from GitHub Add the extract path to your $PATH and test your install with ‘sass --version’. In my case I extracted the dart-sass-1.26.5-linux-ia32.tar.gz file (because I am running a 32bit Intel processor) into my home/Downloads directory and added this line to my .bashrc file. export PATH="$HOME/Downloads/dart-sass:$PATH"

Mac OS

Sass can be installed on Mac using Homebrew with this command.

brew install sass/sass/sass

Windows (Chocolatey)

You can use the chocolatey installer (which you’ll need to install first if you don’t have it)

choco install sass

NodeJS

There is a NodeJS install of Sass.

npm install -g sass

The NodeJS version is useful if the Dart version has not been compiled for your architecture (Like ARM64). The NodeJS Sass is a bit slower than the Dart version, but it is still under active development.

Compass Sass

Compass is a toolset or framework for Sass. It includes,

From: “Sass and Compass in Action” Manning Press

Compass Library of Mixins

I compare Compass Sass with JQuery. It enhances Sass the way JQuery enhances Javascript, by providing cross browser libraries and patterns that ease common web development tasks. Compass. The Compass core stylesheets are design agnostic and well tested by the community that created them.

Compass Sass is installed as a Ruby Gem alongside the Ruby Sass install and there is no port of Compass to Dart Sass. Compass is essentially end-of-life and has not been maintained since 2016.

Summary

SCSS or “Sassy CSS” is the modern syntax of Sass and uses a format similar to CSS (with parentheses and semi colons). Sass extends CSS by adding reusability and abstraction.

Photo by Aman Ravi on Unsplash

Sign-up to receive the weekly post in your inbox. I don't share email addresses, unsubscribe at any time.

Email Address