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/
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.
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
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.
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
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
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.
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.