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:
Download Sass v1.26.8 (or the current latest version!) from Dart Sass GitHub.
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"]
Then build it, tagging (
-t
) it with the namesass
:docker build -t sass ./
Run the image, mounting the
--watch
folder on the Host (/usr/[mylogin]/dev/css
), which was specified in theDockerfile
above, in the Guest (/css
): File Sharingdocker run --rm -it --init -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.
- use absolute paths - the usual, rename
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.- 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
- the filter
With the --init
parameter, Ctrl-C should also work.
Do script the start and stop commands, for goodness sake!
Read the next post on how to customise Bulma using a Sass .scss
file.
Hope this helps someone!
Updated 8 Jan 2021: Added --init
and link to post about customising Bulma.