溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
作為一個運維開發，不像業務開發只專注后端業務開發即可，常常需要自己來構建前端的東西，當然系統交互體驗說的過去就行，要求也沒有業務系統那么高。但是還是會接觸很多前端的知識，像是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 。環境如下：
創建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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
