使用gulp搭建less编译环境

什么是less？

一种动态样式语言.

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行（可以在node中进行编译）。

使用方法：

在页面中可以直接引入less文件，但是必须引入less.js对其进行客户端编译。一般在练习的时候可以这样引入，在开发中就不要使用这样的方式了，因为在客户端进行编译会大量的浪费性能，增加页面响应时间
利用gulp等工具对less进行编译，再项目中引入编译后的css文件

使用gulp搭建less编译环境

全局安装gulp

npm install gulp --global

在项目目录下进行 npm init创建package.json
下载gulp依赖包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具

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

创建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文件并编译的任务

编写响应式栅格化框架

定需求

利用三个阀值将屏幕尺寸分成四种类型：

阀值： 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;

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

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

        width:@i/@gridnum*100%;

        float:left;

    }

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

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

    }

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

}

巴特西

使用gulp搭建less编译环境

什么是less？

使用gulp搭建less编译环境

编写响应式栅格化框架

最新文章

热门文章