Although they are less necessary than in the past, I like to use a CSS pre-processor when doing web development. I used to use LessCSS, but recently I’ve found that I can use Sass without needing either a separate build step, or a package that requires Node.js and npm to install it. The heart of the functionality is provided by libsass, an implementation of Sass as a C++ library.
On Linux systems, this can be installed as a package libsass or similar, but even better is that you can pip install it as a Python package, libsass.
When it comes to using it from a Django project, the first step is to install django-compressor.
Then, you need to add django-libsass as per its instructions.
That’s about it. As per the django-libsass instructions, somewhere in your base HTML templates you’ll have something like this:
{# at the top #} {% load compress %} {% load static %} {# in the <head> element #] {% compress css %} <link rel="stylesheet" type="text/x-scss" href="{% static "myapp/css/main.scss" %}" /> {% endcompress %}
You write your SCSS in that main.scss file (it doesn’t have to be called that), and it can @import other SCSS files of course.
Then, when you load a page, django-compressor will take care of running the SCSS files through libsass, saving the output CSS to a file and inserting the appropriate HTML that references that CSS file into your template output. It caches things very well so that you don’t incur any penalty if files haven’t changed — and libsass is a very fast implementation for when the processing does need to happen.
What this means is that you have eliminated both the need for Node.js/npm, and the need for a build step/process, if you only needed these things for CSS pre-processing.
Of course, the SCSS → CSS compilation still has to happen, but it happens on demand in the same process that runs the web app, and it’s both fast enough and reliable enough that you simply never have to think about it again. So this is “build-less” in the same way that “server-less” means you don’t have to think about servers, and the same way that Python “doesn’t have a compilation step”.
Future proofing
On the Sass-lang page about libsass, they say it is “deprecated”, and on the project page page it says:
While it will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features.
In other words, this is what I prefer to call “mature software” 😉. libsass already has everything I need. If it does eventually fail to be maintained or I need new features, it’s not a problem:
Switch to Dart Sass, which can be installed as a standalone binary.
-
Set your django-compressor settings like this:
This covers the basic case. If you want all the features of django-libsass, which includes looking in your other static file folders for SCSS, you’ll probably need to fork the code and make it work by calling Dart Sass using subprocess — a small amount of work, and nothing that will fundamentally break this approach.