一種 動態 樣式 語言.css
LESS 將 CSS 賦予了動態語言的特性,如 變量, 繼承, 運算, 函數. LESS 既能夠在 客戶端 上運行 (支持IE 6+, Webkit, Firefox),也能夠藉助Node.js或者Rhino在服務端運行(能夠在node中進行編譯)。node
使用方法:npm
在頁面中能夠直接引入less文件,可是必須引入less.js對其進行客戶端編譯。通常在練習的時候能夠這樣引入,在開發中就不要使用這樣的方式了,由於在客戶端進行編譯會大量的浪費性能,增長頁面響應時間json
利用gulp等工具對less進行編譯,再項目中引入編譯後的css文件gulp
npm install gulp --global框架
在項目目錄下進行 npm init建立package.jsonless
下載gulp依賴包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具函數
npm install gulp gulp-less gulp-autoprefixer gulp-clean-css --save-dev工具
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); }