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


Posted in Python onJuly 09, 2019

作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统那么高。但是还是会接触很多前端的知识,像是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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python对象体系深入分析
Oct 28 Python
Python函数式编程指南(四):生成器详解
Jun 24 Python
Python使用pymysql小技巧
Jun 04 Python
Python判断以什么结尾以什么开头的实例
Oct 27 Python
对Python2与Python3中__bool__方法的差异详解
Nov 01 Python
详解Python:面向对象编程
Apr 10 Python
Django框架登录加上验证码校验实现验证功能示例
May 23 Python
python的移位操作实现详解
Aug 21 Python
django多种支付、并发订单处理实例代码
Dec 13 Python
Django 404、500页面全局配置知识点详解
Mar 10 Python
python基于exchange函数发送邮件过程详解
Nov 06 Python
python处理json数据文件
Apr 11 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
Jul 08 #Python
使用python socket分发大文件的实现方法
Jul 08 #Python
python查看文件大小和文件夹内容的方法
Jul 08 #Python
python 搜索大文件的实例代码
Jul 08 #Python
代码实例讲解python3的编码问题
Jul 08 #Python
Python参数类型以及常见的坑详解
Jul 08 #Python
python里运用私有属性和方法总结
Jul 08 #Python
You might like
php 各种应用乱码问题的解决方法
2010/05/09 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python中decorator使用实例
2015/04/14 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python通过Pillow实现图片对比
2020/04/29 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
任命书怎么写
2014/06/04 职场文书
抢劫罪辩护词
2015/05/21 职场文书
士兵突击观后感
2015/06/16 职场文书
校园安全教育心得体会
2016/01/15 职场文书