什么是less?
一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行(可以在node中进行编译)。
使用方法:
1. 在页面中可以直接引入less文件,但是必须引入less.js对其进行客户端编译。一般在练习的时候可以这样引入,在开发中就不要使用这样的方式了,因为在客户端进行编译会大量的浪费性能,增加页面响应时间
2. 利用gulp等工具对less进行编译,再项目中引入编译后的css文件
使用gulp搭建less编译环境
1. 全局安装gulp
npm install gulp --global
2. 在项目目录下进行 npm init创建package.json
3. 下载gulp依赖包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具
npm install gulp gulp-less gulp-autoprefixer gulp-clean-css --save-dev
4. 创建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-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);
}
```
- 简述 OAuth 2.0 的运作流程
本文将以用户使用 github 登录网站留言为例,简述 OAuth 2.0 的运作流程. 假如我有一个网站,你是我网站上的访客,看了文章想留言表示「朕已阅」,留言时发现有这个网站的帐号才能够留言,此时 ...
- JavaScript单线程和浏览器事件循环简述
JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...
- Design Patterns Simplified - Part 3 (Simple Factory)【设计模式简述--第三部分(简单工厂)】
原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part3-factory/ Design ...
- Android网络定位服务定制简述
Android 添加高德或百度网络定位服务 Android的网络定位服务以第三方的APK方式提供服务,由于在国内Android原生自带的com.google.android.gms服务几乎处于不可用状 ...
- 《Entity Framework 6 Recipes》翻译系列 (1) -----第一章 开始使用实体框架之历史和框架简述
微软的Entity Framework 受到越来越多人的关注和使用,Entity Framework7.0版本也即将发行.虽然已经开源,可遗憾的是,国内没有关于它的书籍,更不用说好书了,可能是因为EF ...
- 简述ASP.NET MVC原理
1.为什么ASP.NET需要MVC? 因为随着网站的的数量级越来越大,原始的网站方式,这里指的是WebForm,在运行速度和维护性方面,以及代码量上面,越来越难以满足日益庞大的网站维护成本.代码的重构 ...
- Design Patterns Simplified - Part 2 (Singleton)【设计模式简述--第二部分(单例模式)】
原文链接: http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part-2-singleton/ De ...
- 【翻译】设计模式学习系列1---【Design Patterns Simplified: Part 1【设计模式简述:第一部分】】
原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part1/ Design Pattern ...
- Android开发3:Intent、Bundle的使用和ListView的应用 、RelativeLayout(相对布局)简述(简单通讯录的实现)
前言 啦啦啦~博主又来骚扰大家啦~大家是不是感觉上次的Android开发博文有点长呢~主要是因为博主也是小白,在做实验的过程中查询了很多很多概念,努力去理解每一个知识点,才完成了最终的实验.还有就是随 ...
- iOS开发路线简述
1 iOS开发环境1.1 开发环境标准的配置是MacOSX+Xcode.MacOSX的话首选用苹果电脑,Macmini最便宜只要4000多就好了然后自己配一个显示器,MacBookPro 也可以,不推 ...
随机推荐
- Pyhton编程(二)之变量、用户输入及条件语句
一:变量 变量定义的规则 1)只能由数字.字母.下划线组成(不能以数字开头) 2)不能使用关键字作为变量名 ['and', 'as', 'assert', 'break', 'class', 'con ...
- Django REST FrameWork中文教程2:请求和响应
从这一点开始,我们将真正开始覆盖REST框架的核心.我们来介绍几个基本的构建块. 请求对象REST框架引入了Request扩展常规的对象HttpRequest,并提供更灵活的请求解析.Request对 ...
- (转)Java开发中的23种设计模式详解
原文出自:http://blog.csdn.net/zhangerqing 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型 ...
- dubbo 笔记-XML配置文件简介
<dubbo:service/> 服务配置,用于暴露一个服务,定义服务的元信息,一个服务可以用多个协议暴露,一个服务也可以注册到多个注册中心. eg.<dubbo:service r ...
- SpringMVC 集成redis
一.下载导入jar 二.配置redis 1.创建redis.properties # Redis settings #redis.host=192.168.20.101 #redis.port= #r ...
- LeetCode 202. Happy Number (快乐数字)
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- C++ 对象成员函数(非静态方法)
1.神奇的inline语法与语义 inline语义C99和C++98都有.之前在单源文件编写的时候一直没有发现问题,但是一考虑到多文件的链接,就发现矛盾了. 一些inline的原则: 1. inlin ...
- 算法改进 | java语言中判断素数
参考文章:http://blog.csdn.net/kp_liu/article/details/37569507 http://blog.csdn.net/huang_miao_xin/articl ...
- mysql用户权限设置,远程访问设置、设置固定ip远程访问,设置root用户不能远程访问mysql数据库
关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost ...
- SAP开发快捷键
F1 帮助 F2 回车确认(在某些地方可用,比如ABAP) F3 返回 F4 选择输入项 F5 新增 F6 复制为... F7 全选 F8 选择 ...