Django 中如何使用 sass
作为一个运维开发，不像业务开发只专注后端业务开发即可，常常需要自己来构建前端的东西，当然系统交互体验说的过去就行，要求也没有业务系统那么高。但是还是会接触很多前端的知识，像是css、html、javascript 是必不可少的，你可以不精通，但必须会用。最近前端发展迅猛，已向着工程化大前端进发。常常开玩笑说，前端才是全栈，前后端、各平台全端通吃，现在貌似已成为事实。
今天，和大家分享下前端样式工具 sass如何在Django中应用。
# 什么是 sass
Sass or (Syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). - Wikipedia
以上是wiki百科的解释，简单来说，sass 是一种方便大家来编写css的一种高级的样式预编译语言。只所以叫「预编译」,是因为使用它的时候，需要编译成浏览器能识别的css。
官方网站：https://sass-lang.com/
Sass 3版本以后，新引入了Scss语法，它完全兼容Css3，并且继承了Sass 的强大功能。关于Scss和Sass，这里不做过多解释，有兴趣的可参考官方文档介绍。
话说回来，Sass 除了编写方便外，还有那些优势，大家可阅读这篇经典的文章why sass? (opens new window)。
关于Sass的常用方法，推荐大家阅读阮老师的这篇sass用法指南 (opens new window)。
下面，来说下怎么在我们的常用web框架 Django 中如何集成。
# 在Django中使用sass
下面我们来一步步的配置Sass。环境如下：
- Python：3.6
- Django: 2.2
# 创建Django项目
1、创建Python的开发虚拟环境：
$ python3 -m venv env
$ source env/bin/active
2
2、安装django, 创建django项目；
$ pip install django
$ django-admin startproject sass_demo
2
3、增加相关配置
# settings.py
TEMPLATES = [
{
...
'DIRS': [
os.path.join(BASE_DIR, 'templates')
],
} ...
]
2
3
4
5
6
7
8
9
10
并创建一个index.html模板，如下：
<html>
<head>
<title>Django sass demo</title>
</head>
<body>
<div class="content">
Django sass demo
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
运行 python manaage.py runserver 检查Django项目是否配置好。
# 安装Django sass
这里我们采用了两个Django的第三方应用django-compressor (opens new window) 和 django-sass-processor (opens new window), 分别对css进行压缩和编译。
1、安装django sass 应用库
$ pip install libsass django-compressor django-sass-processor
2、settings 中增加如下配置
INSTALLED_APPS = [
…
'sass_processor',
…
]
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'sass_processor.finders.CssFinder',
]
# Django Sass 编译后css 的存放位置
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR,'static','css')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3、添加sass文件
创建sass 文件。
$ mkdir static && touch static/css/demo.scss
在index.html 中加入如下配置：
{% load sass_tags %}
<html>
<head>
<title>Django sass demo</title>
<link href="{% sass_src 'css/demo.scss' %}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
Django sass demo
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
demo.scss 添加sass 的样式代码：
body {
.content{
width: 100%;
padding: 20px;
text-align: center;
background: grey;
p {
padding: 20px;
background: pink;
}
}
}
2
3
4
5
6
7
8
9
10
11
12
在浏览器，再次刷新会看到样式生效。打开开发者工具，查看html代码，会发现，sass代码已替换为css，如下：
<link href="/static/css/demo.css" rel="stylesheet" type="text/css">
至此，整个Sass 的集成工作就完成了。
# 总结
django-compressor 和 django-sass-processor 很好的完成了css的编译和压缩工作，上文只是简单快速的描述了下配置的过程，还有更多功能大家可参阅他们的使用文档。另外他们的压缩功能是根据Debug 来控制的，只有生产环境，即Debug为false 的时候才会压缩。测试环境中，可通过添加如下参数尝试：
SASS_OUTPUT_STYLE = 'compressed'
以上代码的完整版本，可从这里获取：https://github.com/pylixm/django-sass-demo