Sass - Common Implementation

   
   
 hugo  cli  
 ssg  frontend  
Related Articles

Sass Watch Articles.

Supplementary Article for Windows User.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Transform Sass into CSS using Sass compiler.

There are a few options to compile Sass.

  • Common Compiler: ruby-sass, dart-sass, and node-sass.

  • LibSass Wrapper: SassC, sass.cr, go-libsass, jsass, sass.js, lua-sass, libsass-net, node-sass, CSS::Sass, SassPHP, libsass-python, sassc-ruby, sass_rs, and Sass-Scala.

  • Task Runner: Gulp, Grunt. And maybe also these: Brunch, Broccoli, WebPack, and Parcel.

Reading

This article only explain common compiler. These three has been mentioned in official documentation.

Table of Content

  • Preface: Table of Content

  • Prepare

  • 1: deprecated ruby-sass

  • 2: dart-sass

  • 3: node-sass

  • What is Next ?

Prepare

We need an example of Sass. Any example is okay. You can use any.

Example Sass

I already have a Sass project You can just git clone the repository to get that Sass case.

$ git clone https://epsi-rns.gitlab.io/demo-hugo/

sass case: example in tree

1: deprecated ruby-sass

Ruby Sass has been officialy deprecated. It also very common. There are already tons of tutorials. So I won’t talk about it know more.

Reading

Example in Other Reference

I have been explain ruby-sass a few times in this blog. As part of Bootstrap, part of Jekyll, and part of Hugo.

Command

I have a need to show the command, because each sass compiler implementation might have a few differences.

$ sass --watch -I sass sass/themes/oriclone:static/assets/css --style compressed --sourcemap=none

2: dart-sass

The deprecated ruby-sass has been replaced with dart-sass.

Reading

Installing

The issue with dart is, this good language is not friendly to linux distribution, other than apt-based. Fortunately, installing dart is easy. All you need is download, extract and voila, it works.

in Windows

Installing Dart in Windows is even easier using Chocolatey.

Windows cmder: choco install sass

Command

Dart-sass options is a little bit different than the ruby-sass counterpart.

I put my downloaded archive in /media/Works/. Your place might be different.

$ /media/Works/dart-sass/sass --watch -I sass sass/themes/oriclone:static/assets/css --style=compressed --no-source-map

dart-sass: in action

For easy of use, you can make alias, in .bashrc or .zshrc.

alias dart-sass=/media/Works/dart-sass/sass

3: node-sass

node-sass is very common, but if you are a NodeJS beginner, you should be aware about setting up NPM environment.

Reading

Setting-up NPM Environment

No need any sudo!

As a beginner of NodeJS in linux, I hit permission issue a few times, until I find this good article:

It is basically, just setup global path for regular linux user.

node npm: setup global path

Do not forget to add to .bashrc or .zshrc:

export PATH="$PATH:$HOME/.npm-global/bin"

Installing

Now you can just do install globally, without any need of sudo command.

$ npm install -g node-sass

npm: install node-sass

Command

Now you can use this node-sass in your command line. Node-sass options is also a little bit different than the ruby-sass counterpart.

$ node-sass --watch --include-path sass sass/themes/oriclone --output static/assets/css --output-style compressed --omit-source-map-url

node-sass: in action

Using Script

I have got this remarkable idea from Bulma Documentation:

We can actually shorten the script, using packages.json by adding this line below

  "scripts": {
    "css-build": "node-sass --include-path sass sass/themes/oriclone --output static/assets/css",
    "css-watch": "npm run css-build -- --watch --output-style compressed --omit-source-map-url",
    "start": "npm run css-watch"
  },

It is really up to you, how you configure the script. Everyone have their on use case, and require different behaviour.

node-sass: in action

It is simply shorter.

What is Next ?

The issue is, the command is long. We can solve this later using task runner, such as gulp or grunt, and a little introduction to webpack.

There is other article, that you might need to read. Consider continue reading [ Sass - Task Runner ].

Thank you for reading.