Day4 : 人人都說(shuō)Sass好,所以我來(lái)參一腳

都說(shuō)Sass消除樣式表冗余、還有變數(shù)跟繼承的概念等等的,說(shuō)有多好用就有多好用...

馬上來(lái)安裝步驟123....456
首先裝ruby然後裝sass

  1. 安裝ruby
  2. cli 安裝 gulp-sass 輸入:

npm install gulp-sass --save-dev

外表看似簡(jiǎn)單..突然發(fā)現(xiàn)似乎裝個(gè)gulp會(huì)更好
網(wǎng)路上七大姑八大爺,各有各的習(xí)慣,看來(lái)看去反正我的安裝步驟變成這樣

1.gulp

  1. 安裝node.js
  2. cli 輸入:

npm install -g gulp

  1. cd 到專案目錄後輸入:

npm init

  1. 然後再輸入:

npm install gulp -save-dev

  1. 裝 gulp-webserver 輸入:(文章爬一爬就發(fā)現(xiàn)的東西,就順手裝了)

npm install gulp-webserver -save-dev

  1. 在專案目錄底下增加一個(gè)gulpfile.js, 內(nèi)容為:

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']);

  1. 在cli 輸入 gulp 就會(huì)執(zhí)行了,也會(huì)開(kāi)啟瀏覽器

2.Sass

  1. 安裝ruby
  2. cli 安裝 gulp-sass 輸入:

npm install gulp-sass --save-dev

  1. 在 gulpfile.js (設(shè)定sass,css的目錄)

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 檔案目錄
});

  1. 在cli 執(zhí)行 gulp styles (styles指的是task的名字 )

工欲善其事,必先利其器。 第一次安裝花了我6個(gè)小時(shí)(很容易卡在開(kāi)發(fā)環(huán)境建置的人),總之慶幸自己沒(méi)放棄。

嘗試運(yùn)用在一個(gè)網(wǎng)頁(yè)上,點(diǎn)這個(gè)
從需要寫這些


變成只要寫這些

就到這個(gè)階段

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容