Table of Contents

What is Sass?

Sass is essentially CSS with superpowers. Sass is a preprocessor scripting language (SassScript) that is interpreted or compiled into Cascading Style Sheets.

“Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”

- sass-lang.com

The difference between SCSS and Sass

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

- Sass documentation

Both SCSS and Sass needs to be processed by the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.

The problem

While developing websites, I like to automate as much as possible to speed up the development process. This includes automatically building the Sass sources for the styling of my sites.

Since almost all sites I create uses Docker, why not use Docker to build my styling as well, this keeps my development cycle simple & clean.

The solution

While not strictly required, using Docker easens the process of developing Sass and using its watch feature to auto compile any changes.

Dockerfile

This Docker container downloads a specific version of Dart Sass from Github and creates an easy-to-use container that takes input from /sass and compiles it to /css

FROM google/dart

ARG DART_SASS_VERSION=1.56.0
ARG DART_SASS_TAR=dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
ARG DART_SASS_URL=https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/${DART_SASS_TAR}

ADD ${DART_SASS_URL} /opt/
RUN cd /opt/ && tar -xzf ${DART_SASS_TAR} && rm ${DART_SASS_TAR}
WORKDIR /opt/dart-sass

ENTRYPOINT ["/opt/dart-sass/sass", "/sass:/css"]

This container can then be build using docker build -t sass ./

Running the Sass container

Notes:

  • Use absolute paths
  • Make sure the /css path is writable
docker run --rm -it --init \
-v /path/to/sass:/sass \
-v /path/to/css:/css \
sass

It is also possible to append any other arguments to the end of the command.

With --watch it automatically compiles when any file changes!

docker run --rm -it --init \
-v /path/to/sass:/sass \
-v /path/to/css:/css \
sass --watch --no-source-map -s compressed

Example

Lets create a basic CSS template using Sass and compile it with the Sass pre-compiler container.

src/
  Dockerfile
  sass/
    mystyles.sass
  css/

src/sass/mystyles.sass

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Running docker run --rm -it --init -v /path/to/sass:/sass -v /path/to/css:/css sass Will result in the following compiled CSS file.

src/css/mystyles.css

body {
  font: 100% Helvetica,sans-serif;
  color: #333
}

Compiling a framework

Of course, this is not limited to custom SassScript sources. The same process can be used to build CSS frameworks based on Sass as well! Lets take Bulma for example

$ git clone https://github.com/jgthms/bulma sass
$ docker run --rm -it --init -v /path/to/sass:/sass -v /path/to/css:/css sass --no-source-map -s compressed

This will create a usable bulma.css file in /css ready to be used on any website.

This concludes my process of compiling Sass with Docker that can be used to automate the stylesheet compilation for any website.