利用gulp搭建less編譯環境

 

 什麼是less？

 

一種 動態 樣式 語言.

 

LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數. LESS 既能夠在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行（能夠在node中進行編譯）。

 

使用方法：

 

1. 在頁面中能夠直接引入less文件，可是必須引入less.js對其進行客戶端編譯。通常在練習的時候能夠這樣引入，在開發中就不要使用這樣的方式了，由於在客戶端進行編譯會大量的浪費性能，增長頁面響應時間

 

2. 利用gulp等工具對less進行編譯，再項目中引入編譯後的css文件

 

使用gulp搭建less編譯環境

 

1. 全局安裝gulp

 

npm install gulp --global

 

2. 在項目目錄下進行 npm init建立package.json

 

3. 下載gulp依賴包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具

 

npm install gulp gulp-less gulp-autoprefixer gulp-clean-css --save-dev

 

4. 建立gulpfile.js文件編寫任務

```

var gulp = require("gulp")

var less = require("gulp-less")

//css 前綴兼容

var auto = require("gulp-autoprefixer")

gulp.task("compile:less",function(){

gulp.src("./less/**/*.less")

.pipe(less())

.pipe(auto({

grid:true,

browsers:['last 2 versions']

}))

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

})

 

gulp.task("watch",function () {

gulp.watch("./less/**/*.less",['compile:less'])

})

 

gulp.task("default",['compile:less','watch'])

```

 

這樣就能夠在該項目中，。執行gulp來開啓監聽less文件並編譯的任務

#### 使用LESS來實現柵格化佈局框架

 

藉助less預處理器與gulp自動化構建工具來實現響應式十二柵格化佈局

1. 定需求

 

利用三個閥值將屏幕尺寸分紅四種類型：

 

閥值： 768-992-1200

 

類型： xs-sm-md-lg

 

柵格化數量：12

 

```

@screen1:768px;

@screen1:992px;

@screen1:1200px;

@gridnum:12;

```

 

柵格化類名與樣式

 

container,container-fluid

 

row

 

col-type-num

 

```

// mixins

 

.width(@w:100%){

width: @w;

margin-left:auto;

margin-right:auto;

}

 

.padding-content(@w:15px){

padding-left: @w;

padding-right: @w;

}

 

.clearfix{

&:after{

content:'';

display:block;

height: 0;

overflow: hidden;

visibility: hidden;

clear:both;

}

}

// 0-768 xs

//container container-fluid

 

.container,.container-fluid{

.width;

.padding-content;

.clearfix;

.row{

margin-left: -15px;

margin-right: -15px;

.clearfix;

}

.ghb(xs);

}

.visible-xs{display: block;}

.visible-sm{display: none;}

.visible-md{display: none;}

.visible-lg{display: none;}

 

.hidden-xs{display: none;}

.hidden-sm{display: block;}

.hidden-md{display: block;}

.hidden-lg{display: block;}

// 768-992 sm

//container container-fluid

 

@media screen and (min-width:@screen1){

.container{

.width(@screen1);

}

.container,.container-fluid{

.ghb(sm);

}

 

.visible-xs{display: none;}

.visible-sm{display: block;}

.visible-md{display: none;}

.visible-lg{display: none;}

 

.hidden-xs{display: block;}

.hidden-sm{display: none;}

.hidden-md{display: block;}

.hidden-lg{display: block;}

 

 

}

// 992-1200 md

//container container-fluid

 

@media screen and (min-width:@screen2){

.container{

.width(@screen2);

}

.container,.container-fluid{

.ghb(md);

}

.visible-xs{display: none;}

.visible-sm{display: none;}

.visible-md{display: block;}

.visible-lg{display: none;}

 

.hidden-xs{display: block;}

.hidden-sm{display: block;}

.hidden-md{display: none;}

.hidden-lg{display: block;}

}

// 1200- lg

//container container-fluid

 

@media screen and (min-width:@screen3){

.container{

.width(@screen3);

}

.container,.container-fluid{

.ghb(lg);

}

 

.visible-xs{display: none;}

.visible-sm{display: none;}

.visible-md{display: none;}

.visible-lg{display: block;}

 

.hidden-xs{display: block;}

.hidden-sm{display: block;}

.hidden-md{display: block;}

.hidden-lg{display: none;}

}

// .abc (@i:1) when (@i <= 100) {

// .a@{i}{

// width: unit(@i,px);// number->pixel

// }

 

// .abc(@i+1);

// }

// .abc;

.ghb (@type,@i:0) when(@i<=@gridnum) {

 

.col-@{type}-@{i}{

width:@i/@gridnum*100%;

float:left;

}

 

.col-@{type}-offset-@{i}{

margin-left:@i/@gridnum*100%;

}

 

.ghb(@type,@i+1);

}

```