都說Sass消除樣式表冗余、還有變數跟繼承的概念等等的,說有多好用就有多好用...
馬上來安裝步驟123....456
首先裝ruby然後裝sass
npm install gulp-sass --save-dev
外表看似簡單..突然發現似乎裝個gulp會更好
網路上七大姑八大爺,各有各的習慣,看來看去反正我的安裝步驟變成這樣
npm install -g gulp
npm init
npm install gulp -save-dev
npm install gulp-webserver -save-dev
var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('./app/')
.pipe(webserver({
port:1234,
livereload: true,
directoryListing: false,
open: true,
fallback: 'index.html'
}));
});
gulp.task('default',['webserver']);
npm install gulp-sass --save-dev
var gulp = require('gulp'), // 載入 gulp
gulpSass = require('gulp-sass'); // 載入 gulp-sass
gulp.task('styles', function () {
gulp.src('sass/style.sass') // 指定要處理的 Sass 檔案目錄
.pipe(gulpSass()) // 編譯 Sass
.pipe(gulp.dest('css')); // 指定編譯後的 css 檔案目錄
});
工欲善其事,必先利其器。 第一次安裝花了我6個小時(很容易卡在開發環境建置的人),總之慶幸自己沒放棄。
嘗試運用在一個網頁上,點這個
從需要寫這些
變成只要寫這些
先到這個階段