ionic開發介紹之SASS介紹

2021-07-25 08:06:04 字數 673 閱讀 9469

本文只是簡單的簡紹。適用於剛剛開發ionic專案的同學學習了解

sass的作用以及在本工程裡使用的細節,,需要gulpfile.js那些命令支援,以及編碼

ionic框架使用了sass來定義自己的css機構,當然我們自定義的css檔案也使用sass。

因此涉及到sass編譯為css的步驟。當然實際上還需要多編譯後的css進行壓縮。以下為gulpfile.js裡關於sass編譯的**:

gulp.task('sass', function(done) ))

.pipe(rename())

.pipe(gulp.dest('./www/css/'))

.on('end', done);

});

注意其中gulp.src()可以指定多個目錄比如:

gulp.src(『./src/*.scss』,』src/**/*scss』)

編譯後的**被放置到www的css資料夾

一般對於編寫scss**以及除錯需要實時檢視css效果,因此一般還有一下**:

gulp.task('watch', ['sass'], function() );

分別執行 ,gulp sass 和gulp watch 或者使用gulpfile.js內部其他命令呼叫

ionic開發之使用sass

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

shell開發之簡單介紹

shell指令碼是解釋型語言,網上隨便搜一下,就知道其定義,但是可能很多初學者最後還是一頭霧水。所以我是以直接 通俗的方式進行解釋各種問題,不想弄得那麼文縐縐的。咱們學技術的,就別那麼折騰。解釋型語言,就是不生成執行檔案,不能放到記憶體裡面直接執行,而通過shell程式解釋成機器語言後,再放到記憶體...

Winform開發框架之介紹

框架已經正式改名為 yeswin開發框架,最新資料請前往 yeswinform 簡介 yes快速開發平台框架 yesdotnet.com winform開發框架,儘量減少程式設計師在介面中的 量和工作量,model自動生成,介面以及控制項自動生成,簡單的邏輯自動生成。自動生成的介面已經實現簡單邏輯增...