djangoでsassを使えるようにしてみた

2015年10月29日2016年1月11日

djangoのプロジェクトでsassを自動でcss出力するようにしてみた。
pythonのバージョンは3.4で試した。
サンプルのgithubリポジトリはこちら

インストールするもの

libsass
django-sass-processor

pipでサクッとインストール

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

セッティング

プロジェクト名はsasstestで作成
適当な名前でアプリを作成し（ここでは"web"）、static/sassに保存されたmain.scssから自動でcssが生成されるようにしてみる

まずはプロエジェクトの準備

$ django-admin.py startproject sasstest
$ cd sasstest
$ mkdir -p static/sass
$ python manage.py startapp web
$ mkdir -p web/templates/web

次にファイルを編集する

sasstest/settings.py

以下を追記

INSTALLED_APPS = (

    'sass_processor',
    'web',
)


STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)
SASS_PROCESSOR_ROOT = 'static'

sasstest/urls.py

以下を追記

from web import views

urlpatterns = patterns('',

    url(r'^$', views.index),
)

web/templates/web/index.html

{% load sass_tags %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Sass Test</title>
    <link rel="stylesheet" href="{% sass_src 'sass/main.scss' %}" />

  </head>
  <body>
    <h1> Sass Test</h1>
    <section class="Sec1">
      <ul>
        <li>Sample1</li>
        <li>
          <div>Sample2</div>
          <div>Sample3</div>
        </li>
      </ul>
    </section>
  </body>
</html>

web/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'web/index.html', {})

static/sass/main.scss

h1{
    border-bottom: 3px solid #55f;
}

.Sec1{
    >ul{
        list-style: none;
        margin-left: 0;
        li{
            &:last-child{
                >div{
                    float: left;
                }
                &:after{
                    clear: both;
                }
            }
        }
    }
}