The absolute simplest way to use Sass with Django. Pure Python, minimal dependencies, and no special configuration required!
The absolute simplest way to use Sass with Django. Pure Python, minimal dependencies, and no special configuration required.
| Python Package |      |
| Build |   |
pip install django-sass
INSTALLED_APPS (you only need to do this in a dev environment,
you would not want this in your production settings file, although it adds zero
overhead):INSTALLED_APPS = [
...,
'django_sass',
]
In your app's static files, use Sass as normal. The only difference is that
you can not traverse upwards using ../ in @import statements. For example:
app1/
|- static/
|- app1/
|- scss/
|- _colors.scss
|- app1.scss
app2/
|- static/
|- app2/
|- scss/
|- _colors.scss
|- app2.scss
In app2.scss you could reference app1's and app2's _colors.scss import as so:
@import 'app1/scss/colors';
@import 'app2/scss/colors';
// Or since you are in app2, you can reference its colors with a relative path.
@import 'colors';
Then to compile app2.scss and put it in the css directory,
run the following management command (the -g will build a source map, which
is helpful for debugging CSS):
python manage.py sass app2/static/app2/scss/app2.scss app2/static/app2/css/app2.css -g
Or, you can compile the entire scss directory into
a corresponding css directory. This will traverse all subdirectories as well:
python manage.py sass app2/static/app2/scss/ app2/static/app2/css/
In your Django HTML template, reference the CSS file as normal:
{% load static %}
<link href="{% static 'app2/css/app2.css' %}" rel="stylesheet">
✨✨ Congratulations, you are now a Django + Sass developer! ✨✨
Now you can commit those CSS files to version control, or run collectstatic
and deploy them as normal.
For an example project layout, see testproject/ in this repository.
To have django-sass watch files and recompile them as they change (useful in
development), add the --watch flag.
python manage.py sass app2/static/app2/scss/ app2/static/app2/css/ --watch
To compile minified CSS, use the -t flag to specify compression level (one of:
"expanded", "nested", "compact", "compressed"). The default is "expanded" which
is human-readable.
python manage.py sass app2/static/app2/scss/ app2/static/app2/css/ -t compressed
You may now optionally commit the CSS files to version control if so desired,
or omit them, whatever fits your needs better. Then run collectsatic as normal.
python manage.py collectstatic
And now proceed with deploying your files as normal.
@import statements must reference a path relative to a path in
STATICFILES_FINDERS (which will usually be an app's static/ directory or
some other directory specified in STATICFILES_DIRS). Or they can reference a
relative path equal to or below the current file. It does not support
traversing up the filesystem (i.e. ../).
Legal imports:
@import 'file-from-currdir';
@import 'subdir/file';
@import 'another-app/file';
Illegal imports:
@import '../file';
Only supports -g, -p, and -t options similar to pysassc. Ideally
django-sass will be as similar as possible to the pysassc command line
interface.
Feel free to file an issue or make a pull request to improve any of these limitations. 🐱💻
Other packages such as
django-libsass and
django-sass-processor, while
nice packages, require django-compressor which itself depends on several other
packages that require compilation to install.
Installing django-compressor in your production web server requires a LOT of
extra bloat including a C compiler. It then will compile the Sass on-the-fly
while rendering the HTML templates. This is a wasteful use of CPU on your web
server.
Instead, django-sass lets you compile the Sass locally on your machine
before deploying, to reduce dependencies and CPU time on your production web
server. This helps keep things fast and simple.
django-sass is for you.django-sass is for you.django-sass is for you.django-sass is for you too.django-sass only depends on libsass (which provides pre-built wheels for Windows, Mac, and Linux), and of course Django (any version).
You can also use django-sass in Python to programmatically compile the sass.
This is useful for build scripts and static site generators.
from django_sass import compile_sass
# Compile scss and write to output file.
compile_sass(
inpath="/path/to/file.scss",
outpath="/path/to/output.css",
output_style="compressed",
precision=8,
source_map=True
)
For more advanced usage, you can specify additional sass search paths outside
of your Django project by using the include_paths argument.
from django_sass import compile_sass, find_static_paths
# Get Django's static paths.
dirs = find_static_paths()
# Add external paths.
dirs.append("/external/path/")
# Compile scss and write to output file.
compile_sass(
inpath="/path/to/file.scss",
outpath="/path/to/output.css",
output_style="compressed",
precision=8,
source_map=True,
include_paths=dirs,
)
To set up a development environment, first check out this repository, create a venv, then:
(myvenv)$ pip install -r requirements-dev.txt
Before committing, run static analysis tools:
(myvenv)$ black .
(myvenv)$ flake8
(myvenv)$ mypy
Then run the unit tests:
(myvenv)$ pytest
.sass files as well as .scss files.black.django_sass APIs directly in Python.-g option to build a source map (when input is a file, not a
directory).-p precision from 5 to 8 for better support building
Bootstrap CSS.FAQs
The absolute simplest way to use Sass with Django. Pure Python, minimal dependencies, and no special configuration required!
We found that django-sass demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.