djangoでsassを使えるようにしてみた
インストールするもの
- libsass
- django-sass-processor
pipでサクッとインストール
$ pip install libsass $ pip install django-sass-processor
セッティング
プロジェクト名はsasstestで作成
適当な名前でアプリを作成し(ここでは"web")、static/sassに保存されたmain.scssから自動でcssが生成されるようにしてみる
適当な名前でアプリを作成し(ここでは"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; } } } } }
確認
runserverしてちゃんと表示されていることを確認
static/sass/の下にmain.cssが生成されている。また、出力されたhtmlのソースでは/static/sass/main.cssにリンクが貼られていることが確認できる