Introduction

Sass or (Syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). - Wikipedia

Check out this awesome article on A List Apart about Sass.

In this quick tutorial, I will show you how you can include Sass in your Django Application.

Requirements

• Python v3.7.2
• Django v2.1.5
• Django-sass-processor v0.7.2
• Django-compressor v2.2

Initial Setup

1. Clone this boilerplate from our Create a Simple Django Boilerplate tutorial to your desktop

$ git clone https://github.com/Papagoat/Create-a-Simple-Django-Boilerplate.git

2. Cd into the project folder and set up venv

$ cd Create-a-Simple-Django-Boilerplate
$ python3 -m venv myvenv
$ source ./myvenv/bin/activate

3. Install pip if you haven't already
4. Install the dependencies from requirements.txt

$ pip install -r requirements.txt

5. Start the development server

$ python manage.py runserver

Visit http://localhost:8000/ from your browser.

Install Django Sass

Run the following command to install the Django Sass libraries.

$ pip install libsass django-compressor django-sass-processor

Save the dependencies into requirements.txt.

$ pip freeze > requirements.txt

Open demo/settings.py and add sass_processor to INSTALLED_APPS.

INSTALLED_APPS = [
    …
    'sass_processor',
    …
]

Sass Magic

1. Create a static folder inside the boilerplate folder.
2. Create a demo.scss file.

$ mkdir boilerplate/static && touch boilerplate/static/demo.scss

.sass? .scss? .css? Huh?

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.

In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE's old filter syntax. 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.

Some people find this to be easier to read and quicker to write than SCSS. The indented syntax has all the same features, although some of them have slightly different syntax; this is described in the indented syntax reference. Files using this syntax have the .sass extension. - Explanation of SASS vs SCSS

Open boilerplate/static/demo.scss and paste the following.

body {
    .container-fluid {
    width: 100%;
    padding: 20px;
    text-align: center;
    background: grey;
        p {
            padding: 20px;
            background: pink;
        }
    }
}

Edit boilerplate/templates/boilerplate/base.html.

{% load sass_tags %}

...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="{% sass_src 'demo.scss' %}" rel="stylesheet" type="text/css" />

    </head>
...

To locate the generated .css files, we need to define a directory and reference it in our settings.py.

We include a finder that is packaged with django-sass-processor and refer to the directory with SASSPROCESSORROOT.

Add this code to the end of demo/settings.py.

...
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]

## Django Sass
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR,'static')
...

Refresh the development server to see the changes.

Conclusion

This is an example of the ease of using Sass in your Django applications.

If you are feeling adventurous, try your hands at integrating Bootstrap 4 Sass.

You can clone the entire source code of this project from GitHub.