Sass introduction

• Large web projects are formatted with thousands of lines of CSS code
• It takes a lot of time to write and maintain that code
  • A simple request from a client to implement a different color scheme, for example, often results in color codes having to be changed in dozens of places
• It would be nice if style files were written more compactly and thus more maintainable
  • Syntactically Awesome StyleSheets (Sass) offers the solution we are looking for

What is Sass?

• Sass is a scripting language that extends CSS
• Sass allows developers to write layout code compactly and modularly and then compile this compact code into CSS which can be linked to in a webpage
• You can find more information about Sass at the official Sass website (opens new window)

REMARKS

• There are 2 possible Sass dialects and corresponding file extensions
  • .scss files: curly braces, semicolons, ... (formatted like regular CSS)
  • .sass files: indentation, no semicolons, ...
• There are 3 implementations of Sass:
  • Dart Sass is the primary implementation of Sass
  • LibSass
  • Ruby Sass (not supported anymore)
• In this course we will use the .scss dialect/file extension and the Dart Sass compiler

• SCSS (and in lesser extent also the indented Sass variant) is widely used, as illustrated in the following graphic of the Developer Ecosystem Survey 2022 (opens new window):

Some advantages of Sass

• Variables
  • You can store values (e.g. a color or font) in variables and re-use them wherever you want
• Functions
  • You can use built-in functions (e.g. color or string functions) or write your own functions
• Nesting
  • It is possible to structure the CSS selectors in the same way as the HTML hierarchy, so you don't have to repeat the parent selector each time
• Partials
  • You can divide your Sass code in different files or partials
• Mixins
  • With mixins you can easily re-use groups of CSS style rules in a flexible way
• ...

How to compile Sass?

• In our embedded CodePen examples, the Sass/.sccs code will be automatically compiled to CSS
• In your local development environment, you have to take care of the compilation yourself. There are some applications available to this end, but we strongly discourage their use and resort to command line compilation (or an integration into an automated workflow).

REMARK

PhpStorm suggests to use/enable File Watcher to compile SCSS to CSS. Answer 'No' to this question:

Command line

• Install the Node package sass (opens new window) (a Sass compiler based on Dart Sass) globally: npm i -g sass
• Compile your Sass code using one of the following commands in a terminal (in the project folder)
  • sass scss-file css-file --watch: compile the Sass code in scss-file (before the space) to the CSS file css-file (after the space)
  • sass source-folder:destination-folder --watch: compile all .scss files in source-folder (before :) to corresponding CSS files in destination-folder (after :)

REMARKS

• The option --watch ensures that any change (in scss-file or source-folder) will automatically trigger a new compilation, so you don't have to re-enter the sass ... command every time
• Use the command sass --help to see which other options are available (e.g. --style=compressed for compressed output)

TIP

Combine the command-line Sass compilation with live-server to facilitate your development experience!

Automated workflow

• Later on (in the group project), we will incorporate the Sass compilation in our automated workflow, based on Gulp