快捷導(dǎo)航

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

更新時(shí)間：2019年07月09日 08:23:17 作者：Pylixm的技術(shù)博客

這篇文章主要介紹了Django中如何使用sass的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

作為一個(gè)運(yùn)維開發(fā)，不像業(yè)務(wù)開發(fā)只專注后端業(yè)務(wù)開發(fā)即可，常常需要自己來構(gòu)建前端的東西，當(dāng)然系統(tǒng)交互體驗(yàn)說的過去就行，要求也沒有業(yè)務(wù)系統(tǒng)那么高。但是還是會(huì)接觸很多前端的知識(shí)，像是css、html、javascript 是必不可少的，你可以不精通，但必須會(huì)用。最近前端發(fā)展迅猛，已向著工程化大前端進(jìn)發(fā)。常常開玩笑說，前端才是全棧，前后端、各平臺(tái)全端通吃，現(xiàn)在貌似已成為事實(shí)。

今天，和大家分享下前端樣式工具 sass 如何在 Django 中應(yīng)用。

什么是 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的一種高級(jí)的樣式預(yù)編譯語言。只所以叫「預(yù)編譯」,是因?yàn)槭褂盟臅r(shí)候，需要編譯成瀏覽器能識(shí)別的css。

官方網(wǎng)站： https://sass-lang.com/

Sass 3版本以后，新引入了 Scss 語法，它完全兼容 Css3 ，并且繼承了 Sass 的強(qiáng)大功能。關(guān)于 Scss 和 Sass ，這里不做過多解釋，有興趣的可參考官方文檔介紹。

話說回來， Sass 除了編寫方便外，還有那些優(yōu)勢，大家可閱讀這篇經(jīng)典的文章 why sass? 。

下面，來說下怎么在我們的常用web框架 Django 中如何集成。

在Django中使用sass

下面我們來一步步的配置 Sass 。環(huán)境如下：

Python：3.6
Django: 2.2

創(chuàng)建Django項(xiàng)目

1、創(chuàng)建Python的開發(fā)虛擬環(huán)境：

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

2、安裝 django , 創(chuàng)建 django 項(xiàng)目；

$ pip install django
$ django-admin startproject sass_demo

3、增加相關(guān)配置

# settings.py

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

并創(chuàng)建一個(gè) index.html 模板，如下：

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

運(yùn)行 python manaage.py runserver 檢查Django項(xiàng)目是否配置好。

安裝Django sass

這里我們采用了兩個(gè)Django的第三方應(yīng)用 django-compressor 和 django-sass-processor , 分別對 css 進(jìn)行壓縮和編譯。

1、安裝django sass 應(yīng)用庫

$ 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文件

創(chuàng)建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;
  }
 }
}

在瀏覽器，再次刷新會(huì)看到樣式生效。打開開發(fā)者工具，查看html代碼，會(huì)發(fā)現(xiàn)，sass代碼已替換為css，如下：

<link href="/static/css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">

至此，整個(gè)Sass 的集成工作就完成了。

總結(jié)

django-compressor 和 django-sass-processor 很好的完成了css的編譯和壓縮工作，上文只是簡單快速的描述了下配置的過程，還有更多功能大家可參閱他們的使用文檔。另外他們的壓縮功能是根據(jù) Debug 來控制的，只有生產(chǎn)環(huán)境，即 Debug 為false 的時(shí)候才會(huì)壓縮。測試環(huán)境中，可通過添加如下參數(shù)嘗試：