Using sass with Flask and jinja2

I would like to include a sass compiler in my Flask application. Is there a generally accepted way of doing this?

Solution 1:

Flask-Assets extension (which uses webassets library) can be used for that. Here's how to configure it to use pyScss compiler (implemented in Python) for SCSS:

from flask import Flask, render_template
from flask.ext.assets import Environment, Bundle

app = Flask(__name__)

assets = Environment(app)
assets.url = app.static_url_path
scss = Bundle('foo.scss', 'bar.scss', filters='pyscss', output='all.css')
assets.register('scss_all', scss)

And in the template include this:

{% assets "scss_all" %}
<link rel=stylesheet type=text/css href="{{ ASSET_URL }}">
{% endassets %}

SCSS files will be compiled in debug mode as well.

pyScss only supports SCSS syntax, but there are other filters (sass, scss and compass) which use the original Ruby implementation.

Solution 2:

Some things have changed since the question was answered in 2013.

You can't have scss installed at the same time as pyscss and expect the pyscss filter to work like in the accepted answer.

scss = Bundle('foo.scss', 'bar.scss', filters='pyscss', output='all.css')

I was getting an error that ended in:

File "/home/sri/crap/example/flask/lib/python2.7/site-packages/webassets/filter/pyscss.py", line 110, in setup
scss.config.STATIC_ROOT = self.static_root or self.ctx.directory

You have to remove scss (i.e. pip uninstall scss) and be sure that pyscss is installed (i.e. pip install pyscss).

Also note that you will have to set some environment variables in order to get pyscss to work as well:

app = Flask(__name__)

assets     = Environment(app)
assets.url = app.static_url_path
scss       = Bundle('index.scss', filters='pyscss', output='all.css')


assets.config['SECRET_KEY'] = 'secret!'
assets.config['PYSCSS_LOAD_PATHS'] = assets.load_path
assets.config['PYSCSS_STATIC_URL'] = assets.url
assets.config['PYSCSS_STATIC_ROOT'] = assets.directory
assets.config['PYSCSS_ASSETS_URL'] = assets.url
assets.config['PYSCSS_ASSETS_ROOT'] = assets.directory

assets.register('scss_all', scss)

see the documentation on the pyscss filter for more info: http://webassets.readthedocs.io/en/latest/builtin_filters.html#pyscss

I hope that this save someone else a lot of time because I wasted a whole day on it.

Solution 3:

A simple one line solution using libsass. After you import sass simply use the compile function with the dirname keyword argument, like this:

sass.compile(dirname=('path/to/sass', 'path/to/css'))

You also have the option to set the output style, for example:

sass.compile(dirname=('path/to/sass', 'path/to/css'), output_style='compressed')

If you want to watch a file or directory for automatic compilation on every edit use boussole.

Solution 4:

Currently, exist a better approach for this issue, the extion Flask-Scss.

You just have to install it: pip install Flask-Scss

And instanciate a Scss object after configuring the application (probably in your manage.py file):

from flask import Flask
from flask.ext.scss import Scss

app = Flask(__name__)
Scss(app)

By default, the extension will look for your .scss files in {app.root_dir}/assets/scss or {app.root_dir}/assets and will put the generate .css files in {default_static_dir}/css or {default_static_dir}.