DjangoでSCSSを使用するには #Python

前書き

SCSSはCSSの書き方ほぼそのままにSassの機能が使えるため、すでにCSSを使っている人には学習コストが低い、大変便利なメタ言語です。

ただ、Sassは便利ですがコンパイルが必要なため、導入をためらう方もいらっしゃると思います。
もちろんDreamWeaverやVSCodeなどのエディタでは自動でコンパイルしてくれる機能がありますが、プラグインを別途追加する必要がある場合もあり、正直面倒に思う人も多いでしょう。
そういった方でももしDjangoの環境をお持ちであれば、コンパイルをどうするかの問題は一挙に解決することができます。
DjangoにはSassのプロセッサーが用意されているため、簡単な設定でSassを使用することができるのです。

方法

プロセッサーのインストール
プロセッサーはpipコマンドからインストールすることができます。
pip install libsass django-compressor django-sass-processor
staticディレクトリを作成する
作成するのはmanage.pyと同じディレクトリと、各アプリケーションのadmin.pyと同じディレクトリの2か所です。
また、作成したstaticディレクトリにはDjangoのアプリケーション名のディレクトリをそれぞれ作成しておきます。
※冗長な構成に見えるかと思いますが、Djangoのお作法としてこういった構成にしておいた方がいいようです。色々設定していくうちにうまく動かないことがあるのだそうで…

プロジェクトのディレクトリ直下のsettings.pyを編集する
・INSTALLED_APPSにsass_processorを追加する

settings.py

INSTALLED_APPS = [
... 中略 ...
'sass_processor',
]

STATIC、Sassの設定を追加する
今回は特に使いませんが、STATICの設定も一緒にしておくと画像等の参照に便利です。

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.(sass|scss)$'
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = 'compressed'
SASS_TEMPLATE_EXTS = ['.html', '.haml']

SassまたはScssファイルを作成する
アプリケーションのディレクトリ直下に作成したstatic/アプリケーション名のディレクトリにSassまたはScssファイルを作成しましょう。
テンプレートにSassを読み込ませる
テンプレートの最初に下記を記載し、
{% load sass_tags %}
headerで作成したSass・Scssファイルを記載します。
<link rel="stylesheet" href="{% sass_src '【アプリケーション名】/【Sass(scss)ファイル名】' %}">

こうすることで、該当のテンプレートが読み込まれた際にSass・Scssファイルをコンパイルして、manage.pyと同じディレクトリに作成したstaticディレクトリにCSSしてくれます。
ページを表示
コンパイルされたcssファイルが読み込まれ、画面にSass・Scssファイルの内容が反映されます。