作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统那么高。但是还是会接触很多前端的知识,像是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"color: #ff0000">在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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 麦洁文.1989-新曲与精丫新艺宝】【WAV+CUE】
- SNH48《薄荷糖 (Mint Candy)》[320K/MP3][33.72MB]
- SNH48《薄荷糖 (Mint Candy)》[FLAC/分轨][78.59MB]
- 刘美麟《同生》[320K/MP3][70.99MB]
- 群星.1994-宝丽金最流行3CD【宝丽金】【WAV+CUE】
- 群星.2024-聆听“某某”影视原声带【华纳】【FLAC分轨】
- 陈慧娴.1989-永远是你的朋友(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 何洛洛.2024-别叫醒我(EP)【光羽】【FLAC分轨】
- 林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE】
- 黄妃.2005-红【亚律】【WAV+CUE】
- 刘美麟《同生》[FLAC/分轨][161.95MB]
- 群星《前途海量 电影原声专辑》[320K/MP3][106.26MB]
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】