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

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

赞 (0)

相关推荐

  • vue2中使用sass并配置全局的sass样式变量的方法

    Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好.       Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style la

  • 在create-react-app中使用sass的方法示例

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sass是一个将脚本解析成CSS的脚本语言,即SassScript.Sass包括两套语法.最开始的语法叫做"缩进语法",与Haml类似,使用缩进来区分代码块,并且用回车将不同规则分隔开.而较新的语法叫做"SCSS",使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用

  • 详解如何在vue中使用sass

    创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 安装依赖 $ cd my-project $ npm install 为了使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • Vue中使用sass实现换肤功能

    先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样

  • vue2项目使用sass的示例代码

    vue2项目使用sass的示例代码

    1,使用save会在package.json中自动添加. npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通常使用npm安装会出现以下报错,安装失败.(网路问题) 可以通过淘宝的npm镜像安装node-sass,解决以上问题. $ npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) $ cnpm install

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • 在 vue-cli v3.0 中使用 SCSS/SASS的方法

    在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用. 方案一:在组件中直接使用 在组件中直接使用 SCSS/SASS 是最简单的方式: <style lang="scss" scoped> </style> 通过 lang 选

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

    作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统那么高.但是还是会接触很多前端的知识,像是css.html.javascript 是必不可少的,你可以不精通,但必须会用.最近前端发展迅猛,已向着工程化大前端进发.常常开玩笑说,前端才是全栈,前后端.各平台全端通吃,现在貌似已成为事实. 今天,和大家分享下前端样式工具 sass 如何在 Django 中应用. 什么是 sass Sass or (Syntactica

  • centos7中安装Android SDK的方法步骤

    本文介绍了centos7中安装Android SDK的方法步骤,分享给大家 0x01 下载sdktools cd /opt mkdir androidSdk wget https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip unzip sdk-tools-linux-3859397.zip 0x02 配置命令 打开 /opt/profile 添加sdk命令如下: ... export PATH USER LOGNA

  • SpringBoot项目中使用redis缓存的方法步骤

    本文介绍了SpringBoot项目中使用redis缓存的方法步骤,分享给大家,具体如下: Spring Data Redis为我们封装了Redis客户端的各种操作,简化使用. - 当Redis当做数据库或者消息队列来操作时,我们一般使用RedisTemplate来操作 - 当Redis作为缓存使用时,我们可以将它作为Spring Cache的实现,直接通过注解使用 1.概述 在应用中有效的利用redis缓存可以很好的提升系统性能,特别是对于查询操作,可以有效的减少数据库压力. 具体的代码参照该

  • 在Spring Boot应用程序中使用Apache Kafka的方法步骤详解

    第1步:生成我们的项目: Spring Initializr来生成我们的项目.我们的项目将提供Spring MVC / Web支持和Apache Kafka支持. 第2步:发布/读取Kafka主题中的消息: <b>public</b> <b>class</b> User { <b>private</b> String name; <b>private</b> <b>int</b> age

  • 在Django中URL正则表达式匹配的方法

    Django框架中的URL分发采用正则表达式匹配来进行,以下是正则表达式的基本规则: 官方演示代码: from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003/$', views.special_case_2003), url(r'^articles/([0-9]{4})/$', views.year_archive), url(r'^articles/([0-9]{4})/

  • Java中使用JavaScript脚本的方法步骤

    简介 Nashorn Nashorn 一个 javascript 引擎. 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java的嵌入式JavaScript引擎.Nashorn完全支持ECMAScript 5.1规范以及一些扩展. 它使用基于JSR 292的新语言特性,其中包含在JDK 7中引入的 invokedynamic,将JavaScript编译成Java字节码. 与先前的Rhino实现相比,这带来了2到10倍的性能提升. 使用方式 1. 编写Ja

  • 在python3.64中安装pyinstaller库的方法步骤

    Python中为了方便程序直接生成exe文件,它存在一个pyinstaller库,使用这个库可以直接将.py程序生成exe文件.这个命令不是在windows的命令行中执行的. 对于python3.5以下的版本,可以在cmd命令中直接使用. 首先下载pyinstaller库使用pip install pyinstaller下载这个库,下载成功后出现successfully代表下载成功.然后执行命令是 pyinstaller -F -w <文件名.py>,执行命令时需要切换到程序所在的目录,-F代

  • 如何在IDEA中查看依赖关系的方法步骤

    Maven提供了mvn dependency:tree来查看依赖关系,而IDE往往提供了更加便利的方式,比如Eclipse或者IDEA都有类似的功能,这篇文章简单说明一下如何在IDEA中查看依赖关系. 操作1: 打开Maven Project视图 点击Maven Project视图,如果此视图没有打开,请使用View菜单将其打开. 操作2: 显示依赖图 选中相应的项目,在右键菜单中选择 然后就可以看到整体的依赖关系图了 操作3: 查看 点击1:1的按钮,然后就可以正常查看了 Ctrl + F之后

  • 如何在vscode中安装python库的方法步骤

    如何在vscode中安装python库的方法步骤

    vscode安装python库 1.已经在vscode中装了python并配置好python运行环境. 检查是否正确配置好运行环境,按Windows+R组合键在运行窗口输入cmd,打开命令提示符窗口输入python确定即可 2.找到vscode中python的路径 随便运行一个代码,例如print("hehe")下面的终端显示如下 图中红色地方圈起的便是python的路径,到python3.8为止. 如果你所显示的内容与我不同,可在setting.json中查找并将路径复制下来(在vs

随机推荐