Running Sass in a container

macosdockercssbulma

Posted

Here is how to create a Docker container on macOS to “compile” Sass stylesheets to CSS. In my case, I wanted to (re)compile my Bulma-based theme with the latest version 0.9.0 with my variable overrides.

I previously mentioned using Bulma Customizer, but (I think) this tool has not yet been updated to use v0.9.0. Customizing Bulma requires overriding variables and compiling using Sass. For the uninitiated, Sass is “the most mature, stable, and powerful professional grade CSS extension language in the world.”

I dislike tools that insist I install the Homebrew package manager on macOS. So, when I saw this instruction on the Sass installation page, I figured to get running in a container instead. After a bit of poking around, I realized the Sass CLI is written in Dart, so I really don’t even need Node or npm!

Here are the steps:

  1. Download Sass v1.26.8 from Dart Sass GitHub.

  2. Create a Dockerfile (in the same folder as the .tar.gz please):

    FROM google/dart
ADD ./dart-sass-1.26.8-linux-x64.tar.gz /opt/
WORKDIR /opt/dart-sass
ENTRYPOINT ["/opt/dart-sass/sass", "--watch", "/css"]

  3. Then build it, tagging (-t) it with the name sass:

    docker build -t sass ./

  4. Run the image, mounting the --watch folder on the Host (/usr/[mylogin]/dev/css), which was specified in the Dockerfile above, in the Guest (/css): File Sharing

    docker run --rm -it -v /Users/[mylogin]/www/css:/css sass
    • use absolute paths - the usual, rename [mylogin]
    • make sure the folder is shared in Docker Desktop, under Preferences > Resources > File Sharing
    • it is possible to append any other arguments to the end of the command, e.g. docker run --rm -it -v /usr/me/dev/css:/src sass -s compressed for compressed output.

  5. Create or place any Sass stylesheets, e.g. mytheme.scss, and folders here - any file changes will trigger a compile auto-magically! Check out the examples of using Bulma with Sass CLI.

  6. Now Sass watches your folder... forever. So, to terminate the running Sass container(s): 
    docker kill `docker ps -f ancestor=sass --format {{.ID}}`
    • the filter -f ancestor=sass finds the image created above, and
    • --format is used to return only the Container ID

Do script the start and stop commands, for goodness sake!

Hope this helps someone!

< Newer
Older >