ionic開發之使用sass

2022-08-04 10:33:10 字數 544 閱讀 4053

sass 是乙個css的預編譯器,常見的預編譯器有less,sass,stylus等,目前sass似乎更受青睞一些,bootstrap的最新版本以及ionic 都是用sass來構建頁面效果的。這篇文章講解如何在ionic工程使用sass,以及淺層次的分析一下ionic是如何構建sass**的。

首先要安裝python,和npm install -g gulp

在工程資料夾中輸入如下命令

$ ionic setup sass
ionic 使用gulp這個構建工具來預編譯sass,我們輸入setup sass命令的時候ionic會新增gulp-sass等gulp外掛程式,然後在ionic.project檔案中新增"gulpstartuptasks"項,在啟動的時候增加gulp任務,sass和watch。

這兩個任務乙個是用來編譯sass檔案,乙個是用來監控sass檔案,一有改動就重新編譯,以適配liveload,下面是gulpfile.js的有關配置

ionic開發介紹之SASS介紹

本文只是簡單的簡紹。適用於剛剛開發ionic專案的同學學習了解 sass的作用以及在本工程裡使用的細節,需要gulpfile.js那些命令支援,以及編碼 ionic框架使用了sass來定義自己的css機構,當然我們自定義的css檔案也使用sass。因此涉及到sass編譯為css的步驟。當然實際上還需...

css sass 使用Sass改進CSS開發

css sass 存檔日期 2019年5月14日 首次發布 2013年5月28日 語法上很棒的樣式表 sass 是元語言和級聯樣式表 css 預處理器。了解sass原理是您更快,更高效地開發css的關鍵。sass為css提供了簡單,優雅且健壯的語法,因此您可以建立可管理的樣式表。在本簡介中,了解使用...

SASS元件開發

body body first child body last child p,blockquote,ul,ol,dl,table,pre h1,h2,h3,h4,h5,h6 h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,...