什么是less？一种 动态 样式 语言.LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行（可以在node中进行编译）。使用方法：1. 在页面中可以直接引入less文件，但是必须引入less.js对其进行客户端编译。一般在练习的时候可以这样引入，在开发中就不要使用这样的方式了，因为在客户端进行编译会大量的浪费性能，增加页面响应时间2. 利用gulp等工具对less进行编译，再项目中引入编译后的css文件
使用gulp搭建less编译环境
1. 全局安装gulpnpm install gulp –global2. 在项目目录下进行 npm init创建package.json3. 下载gulp依赖包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具npm install gulp gulp-less gulp-autoprefixer gulp-clean-css –save-dev4. 创建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-fluidrowcol-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);}“`
