Django中如何使用sass的方法步骤

更新时间：2019年07月09日 08:23:17 作者：Pylixm的技术博客

这篇文章主要介绍了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? 。

下面，来说下怎么在我们的常用web框架 Django 中如何集成。

在Django中使用sass

下面我们来一步步的配置 Sass 。环境如下：

Python：3.6
Django: 2.2

创建Django项目

1、创建Python的开发虚拟环境：

$ python3 -m venv env
$ source env/bin/active

2、安装 django , 创建 django 项目；

$ pip install django
$ django-admin startproject sass_demo

3、增加相关配置

# settings.py

TEMPLATES = [
  {
   ...
   'DIRS': [
     os.path.join(BASE_DIR, 'templates')
   ],
  } ... 
]

并创建一个 index.html 模板，如下：

<html>
 <head>
  <title>Django sass demo</title>
 </head>
 <body>
  <div class="content">
   Django sass demo 
  </div>
 </body>
</html>

运行 python manaage.py runserver 检查Django项目是否配置好。

安装Django sass

这里我们采用了两个Django的第三方应用 django-compressor 和 django-sass-processor , 分别对 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')

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="external nofollow" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div class="content">
   Django sass demo 
  </div>
 </body>
</html>

demo.scss 添加sass 的样式代码：

body {
 .content{
  width: 100%;
  padding: 20px;
  text-align: center;
  background: grey;
  p {
   padding: 20px;
   background: pink;
  }
 }
}

在浏览器，再次刷新会看到样式生效。打开开发者工具，查看html代码，会发现，sass代码已替换为css，如下：

<link href="/static/css/demo.css" rel="external nofollow" 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Django
sass

Python pomegranate库实现基于贝叶斯网络拼写检查器
这篇文章主要为大家介绍了Python pomegranate库实现基于贝叶斯网络拼写检查器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-04-04
Python Pytorch深度学习之神经网络
今天小编就为大家分享一篇关于Pytorch神经网络的文章，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-10-10
python实现计算器功能
这篇文章主要为大家详细介绍了python实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
介绍Python的@property装饰器的用法
这篇文章主要介绍了介绍Python的@property装饰器的用法,是Python学习进阶中的重要知识,代码基于Python2.x版本,需要的朋友可以参考下
2015-04-04
python实现八大排序算法（1）
这篇文章主要为大家详细介绍了python实现八大排序算法的第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
Python用list或dict字段模式读取文件的方法
这篇文章主要给大家介绍了Python利用list字段模式或者dict字段模式读取文件的方法,文中给出了详细的介绍和示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友可以跟着小编来一起学习学习吧。
2017-01-01
opencv与numpy的图像基本操作
这篇文章主要介绍了opencv与numpy的图像基本操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Python中super().__init__()测试以及理解
__init__()一般用来创建对象的实例变量,或一次性操作,super()用于调用父类的方法,可用来解决多重继承问题,下面这篇文章主要给大家介绍了关于Python中super().__init__()测试及理解的相关资料,需要的朋友可以参考下
2021-12-12
Python如何实现逐行读取文本文件
在Python中，有几种方法可以读取文本文件。在本文中，将介绍以下几种方法：open() 函数、read() 方法、readline() 方法、readlines() 方法、close() 方法和 with 关键字。需要的同学可以参考一下
2021-12-12
深入理解python对json的操作总结
Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式，本篇文章主要介绍了python对json的操作总结，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01