Package: django-sass
django-sassThe absolute simplest way to useSasswith Django.
Pure Python, minimal dependencies, and no special configuration required.Source code on GitHubStatusPython PackageBuildInstallationInstall from pip.pip install django-sassAdd to yourINSTALLED_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',]Congratulations, you're done 😀UsageIn your app's static files, use Sass as normal. The only difference is that
you cannottraverse upwards using../in@importstatements. For example:app1/
|- static/
   |- app1/
      |- scss/
         |- _colors.scss
         |- app1.scss
app2/
|- static/
   |- app2/
      |- scss/
         |- _colors.scss
         |- app2.scssInapp2.scssyou could reference app1's and app2's_colors.scssimport 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 compileapp2.scssand put it in thecssdirectory,
run the following management command (the-gwill 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 -gOr, you can compile the entirescssdirectory into
a correspondingcssdirectory. 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 %}<linkhref="{% 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 runcollectstaticand deploy them as normal.For an example project layout, seetestproject/in this repository.Watch ModeTo havedjango-sasswatch files and recompile them as they change (useful in
development), add the--watchflag.python manage.py sass app2/static/app2/scss/ app2/static/app2/css/ --watchExample: deploying compressed CSS to productionTo compile minified CSS, use the-tflag 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 compressedYou may now optionally commit the CSS files to version control if so desired,
or omit them, whatever fits your needs better. Then runcollectsaticas normal.python manage.py collectstaticAnd now proceed with deploying your files as normal.Limitations@importstatements must reference a path relative to a path inSTATICFILES_FINDERS(which will usually be an app'sstatic/directory or
some other directory specified inSTATICFILES_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-toptions similar topysassc. Ideallydjango-sasswill be as similar as possible to thepysassccommand line
interface.Feel free to file an issue or make a pull request to improve any of these
limitations. 🐱‍💻Why django-sass?Other packages such asdjango-libsassanddjango-sass-processor, while
nice packages, requiredjango-compressorwhich itself depends on several other
packages that require compilation to install.Installingdjango-compressorin 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-sasslets you compile the Sass locally on your machinebeforedeploying, to reduce dependencies and CPU time on your production web
server. This helps keep things fast and simple.If you simply want to use Sass in development without installing a web of
unwanted dependencies, thendjango-sassis for you.If you don't want to deploy any processors or compressors to your production
server, thendjango-sassis for you.If you don't want to change the way you reference and serve static files,
thendjango-sassis for you.And if you want the absolute simplest installation and setup possible for
doing Sass,django-sassis 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).Programmatically Compiling SassYou can also usedjango-sassin Python to programmatically compile the sass.
This is useful for build scripts and static site generators.fromdjango_sassimportcompile_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 theinclude_pathsargument.fromdjango_sassimportcompile_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,)ContributingTo set up a development environment, first check out this repository, create a
venv, then:(myvenv)$ pip install -r requirements-dev.txtBefore committing, run static analysis tools:(myvenv)$ black .
(myvenv)$ flake8
(myvenv)$ mypyThen run the unit tests:(myvenv)$ pytestChangelog1.1.0New: Now compiles.sassfiles as well as.scssfiles.Fix bug when input path is a file and output path does not exist.1.0.1Maintanence release, no functional changes.Add additional type hints within the codebase.Tested against Django 3.1Formatted code withblack.1.0.0New: You can now usedjango_sassAPIs directly in Python.Added unit tests.Code quality improvements.0.2.0New feature:-goption to build a source map (when input is a file, not a
directory).0.1.2Fix: Write compiled CSS files as UTF-8.Change: Default-pprecision from 5 to 8 for better support building
Bootstrap CSS.0.1.1Fix: Create full file path if not exists when specifying a file output.0.1.0Initial release