Django中如何使用sass的方法步骤
作者:Pylixm的技术博客 发布时间:2022-11-02 10:32:04
作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统那么高。但是还是会接触很多前端的知识,像是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
来源:https://pylixm.cc/posts/2019-07-08-how-to-use-sass-in-django.html
猜你喜欢
- 比如代码 binfo = {'name':'jay','age':20,'pytho
- Web 前端优化最佳实践第三部分面向 Cookie 。目前只有 2 条实践规则。1. 缩小 Cookie (Reduce Cook
- 如下所示:import numpy as npimport codecs, json a = np.arange(10).reshape(2
- 目录模块与包__import__模块缓存imp 与 importlib 模块惰性导入总结参考资料本文不讨论 Python 的导入机制(底层实
- 在ASP输出页面只是调出数据库里内容展现给用户看没有使用SESSION等动态属性,是可以CACHE的,以加快访问速度具体操作方法如下:在as
- 数据处理版本1#数据处理import osimport torchfrom torch.utils import datafrom PIL
- 今天搭了个“发短信”的页面,找朋友测试,没想到一位大侠直接弄了本长篇小说发我手机上……为了我的宝贝手机能继续健康澎湃,给文本区域(texta
- 方法一:<script language="JavaScript"> <!--
- 关于书写习惯,遵循曾经总结过的风格标准,现在一点都没有变。并且近来翻看高手作品,横向连排似乎在大产品项目中逐渐成为主流,个人认为如此维护效率
- QComboBox 是一个允许用户从列表选项中选择一项的控件。#!/usr/bin/python3# -*- coding: utf-8 -
- 方法一:利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端,所以可以根据Cookies保存的IsVoted的值来判断
- hello,我是李华同学,最近开始学习爬虫,下面是我实现的一个得到弹幕的代码找一个的URL想要得到一个网站的内容,首先要找到你想要内容的具体
- var iframe = document.createElement("iframe"); iframe.id = &
- 为了实现项目中的搜索功能,我们使用的是全文检索框架haystack+搜索引擎whoosh+中文分词包jieba安装和配置安装所需包pip i
- 使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创
- 此文主要讲述的是SQL Server连接中经常出现的3个常见错误,以及对这三个错误的详细分析,如果你其心存好奇的话,以下的文章将会揭开它的神
- 1.whl包whl格式本质上是一个压缩包,里面包含了py文件,以及经过编译的pyd文件。使得可以在不具备编译环境的情况下,选择适合自己的py
- 网上有很多关于PHP在IIS下配置的教程,但都是一些很理性化的东西,我从里面整理出来这个教程 发出来为了方便参考,有什么问题也可以大家一起交
- append(),extend(), insert()都是列表操作中常用的插入函数。其中前两个均接收一个参数,并插入到列表尾部。最后一个接收
- Matplotlib简介Matplotlib是一个Python工具箱,用于科学计算的数据可视化。借助它,Python可以绘制如Matlab和