您好,登錄后才能下訂單哦!
作為一個運維開發(fā),不像業(yè)務(wù)開發(fā)只專注后端業(yè)務(wù)開發(fā)即可,常常需要自己來構(gòu)建前端的東西,當(dāng)然系統(tǒng)交互體驗說的過去就行,要求也沒有業(yè)務(wù)系統(tǒng)那么高。但是還是會接觸很多前端的知識,像是css、html、javascript 是必不可少的,你可以不精通,但必須會用。最近前端發(fā)展迅猛,已向著工程化大前端進(jìn)發(fā)。常常開玩笑說,前端才是全棧,前后端、各平臺全端通吃,現(xiàn)在貌似已成為事實。
今天,和大家分享下前端樣式工具 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的一種高級的樣式預(yù)編譯語言。只所以叫「預(yù)編譯」,是因為使用它的時候,需要編譯成瀏覽器能識別的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)境如下:
創(chuàng)建Django項目
1、創(chuàng)建Python的開發(fā)虛擬環(huán)境:
$ python3 -m venv env $ source env/bin/active
2、安裝 django , 創(chuàng)建 django 項目;
$ pip install django $ django-admin startproject sass_demo
3、增加相關(guān)配置
# settings.py TEMPLATES = [ { ... 'DIRS': [ os.path.join(BASE_DIR, 'templates') ], } ... ]
并創(chuàng)建一個 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的第三方應(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; } } }
在瀏覽器,再次刷新會看到樣式生效。打開開發(fā)者工具,查看html代碼,會發(fā)現(xiàn),sass代碼已替換為css,如下:
<link href="/static/css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">
至此,整個Sass 的集成工作就完成了。
總結(jié)
django-compressor 和 django-sass-processor 很好的完成了css的編譯和壓縮工作,上文只是簡單快速的描述了下配置的過程,還有更多功能大家可參閱他們的使用文檔。另外他們的壓縮功能是根據(jù) Debug 來控制的,只有生產(chǎn)環(huán)境,即 Debug 為false 的時候才會壓縮。測試環(huán)境中,可通過添加如下參數(shù)嘗試:
SASS_OUTPUT_STYLE = 'compressed'
以上代碼的完整版本,可從這里獲取: https://github.com/pylixm/django-sass-demo
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。