什么是less？

?

一種 動(dòng)態(tài) 樣式 語(yǔ)言.

?

LESS 將 CSS 賦予了動(dòng)態(tài)語(yǔ)言的特性，如 變量， 繼承， 運(yùn)算， 函數(shù). LESS 既可以在 客戶(hù)端 上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行（可以在node中進(jìn)行編譯）。

?

使用方法：

?

1. 在頁(yè)面中可以直接引入less文件，但是必須引入less.js對(duì)其進(jìn)行客戶(hù)端編譯。一般在練習(xí)的時(shí)候可以這樣引入，在開(kāi)發(fā)中就不要使用這樣的方式了，因?yàn)樵诳蛻?hù)端進(jìn)行編譯會(huì)大量的浪費(fèi)性能，增加頁(yè)面響應(yīng)時(shí)間

?

2. 利用gulp等工具對(duì)less進(jìn)行編譯，再項(xiàng)目中引入編譯后的css文件

?

使用gulp搭建less編譯環(huán)境

?

1. 全局安裝gulp

?

npm install gulp --global

?

2. 在項(xiàng)目目錄下進(jìn)行 npm init創(chuàng)建package.json

?

3. 下載gulp依賴(lài)包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具

?

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

?

4. 創(chuàng)建gulpfile.js文件編寫(xiě)任務(wù) ``` 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']) ```

?

這樣就可以在該項(xiàng)目中，。執(zhí)行g(shù)ulp來(lái)開(kāi)啟監(jiān)聽(tīng)less文件并編譯的任務(wù)

#### 使用LESS來(lái)實(shí)現(xiàn)柵格化布局框架

?

借助less預(yù)處理器與gulp自動(dòng)化構(gòu)建工具來(lái)實(shí)現(xiàn)響應(yīng)式十二柵格化布局

1. 定需求

?

利用三個(gè)閥值將屏幕尺寸分成四種類(lèi)型：

?

閥值： 768-992-1200

?

類(lèi)型： xs-sm-md-lg

?

柵格化數(shù)量：12

?

``` @screen1:768px; @screen1:992px; @screen1:1200px; @gridnum:12; ```

?

柵格化類(lèi)名與樣式

?

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); }

```

?

轉(zhuǎn)載于:https://www.cnblogs.com/yinxingen/p/7878578.html

總結(jié)

以上是生活随笔為你收集整理的利用gulp搭建less编译环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。