CSS is the language used to style web pages, it is used to set the fonts, the page layouts the spacing between elements and how pages look on phones, tablets and desktop PCs. CSS files are typically named using the 'CSS' extension (eg. 'styles.css'). SCSS is the file extension used for files created using the SASS language - a language that can be used to generate CSS files. While CSS can be coded without SASS, SASS provides conveniences that make it easier to reuse code though concepts like variables and functions (mixins).
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.
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.
Sass has a few advantages over raw CSS. These include:
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]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"
Sass can be installed on Mac using Homebrew with this command.
brew install sass/sass/sassYou can use the chocolatey installer (which you’ll need to install first if you don’t have it)
choco install sassThere is a NodeJS install of Sass.
npm install -g sassThe 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 is a toolset or framework for Sass. It includes,
From: “Sass and Compass in Action” Manning Press
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.
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.