使用gulp搭建less編譯環境

什麼是less?

一種 動態 樣式 語言.css

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

使用方法:npm

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

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

使用gulp搭建less編譯環境
  1. 全局安裝gulp

npm install gulp --global框架

  1. 在項目目錄下進行 npm init建立package.jsonless

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

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

  1. 建立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文件並編譯的任務性能

編寫響應式柵格化框架
  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;



.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);
}
相關文章
相關標籤/搜索