[目录]
- Less为什么会出现？
- 学习Less的网站
- Less的安装环境
- 离线的安装方式
- 在线的安装方式
- less转化成css
- 第一步 新建一个less文件
- 第二步 cmd解析编译成css
- GUI编译工具
- node.js
- 使用clean-css 插件
- 浏览器端不经编译直接使用
- Webstorm中less的使用
- 如何让less文件直接编译成css文件
- 如何在Webstorm中配置less文件的模板
- Less语法
- 注释
- 变量（规则、使用）
- Minxin混入
- 类名混入
- 函数混入
- 带参数的函数混入
- 嵌套
- Import（引用）
- 函数（内置函数和运算）
- less中定义函数
- 内置函数
- 字符串函数
- 综合类函数
- 算数函数
- 颜色函数
- 判断函数
- Bootstrap中less的定制
- 了解Bootstrap中less模块机制
- 如何定制Bootstrap
- 线下定制
- 线上定制
- 版本的更新说明
Less为什么会出现？
css(层叠样式表)是一门标记性语言，html和css不是编程语言，没有变量，函数，作用域等概念。语法简单，但是看起来非常的繁琐没有逻辑，而且很多的样式都大量的冗余。
很多后台的人员写出来的css代码，没有规范就非常的凌乱。不方便维护和扩展。
Less、Sass和Stylus是css的预编译语言，是一种编程语言，是后台人员开发出来的，是在css的语法基础之上，引入了变量，Mixin，运算以及函数等功能，降低了维护成本。
以后缀名为.less的称之为less文件
less可以在多种语言、环境中使用，浏览器端、桌面客户端、服务端。
学习Less的网站
Less官网（英文）
这个英文官网是一个响应式站点
Less中文网
上面的英文网站是一个响应式站点的网站，下面是一个原封不动照搬的一个中文网站，但是我们学习的时候，还是要看下面的这个网站进行学习
LESSCSS
Less的环境安装
如何证明你的机子上有没有安装less？
要安装less首先要安装nodejs
win+R --> cmd --> node -v(如果安装了node就会显示版本号) -->npm -v(检测一下npm是否自带，如果有会显示版本号) --> lessc -v（如果安装了less也会显示版本号）
离线的安装方式
C： --> 用户/user --> 打开自己的用户 -->AppData（因为它是隐藏文件，所以要先显示隐藏文件）-->Roaming --> npm -->如果已经安装了less就会有两个文件（less和less.cmd）、如果没有东西就把npm.zip进行复制，如图：
在线的安装方式
打开npm --> npm install -g less --> 回车
好，这样就安装好less了
less转化成css
less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less转化成css。
第一步 新建一个less文件
先新建一个less文件，保存到桌面
@color:red;
a{
color:@color;
}
第二步 cmd解析编译成css
GUI编译工具
初学者建议使用GUI编译工具来编译less文件，下面是推荐的几个编译工具
-
koala~win/mac/linux
国人开发的less和sass编译工具，界面化 -
Codekit~mac
一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，要钱哦~~ -
WinLess~win
只是在windows下编译less，够专一的 -
SimpleLess~win/mac/linux
也是一个less编译的软件
node.js
安装了node之后就可以直接用node.js来编译了。
在桌面目录中打开cmd，然后执行命令dir（获取当前目录的所有文件） --> 在当前目录上面写lessc less.less less.css命令
就可以看到在桌面上同时生成了一个less.css的文件
打开之后里面的内容是：
a{
color:red;
}
这样就可以在浏览器中使用了。
（在编译的过程中，同时会进行检查，如果有错就会报错）
使用clean-css 插件
安装了这个插件之后，输出的时候就可以转化成压缩过的css
$ lessc --clean-css styles.less styles.min.css
浏览器端不经编译直接使用
- 下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js
- 在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
注意这里rel里面的值是stylesheet/less，不是stylesheet
- 引入js文件
<script src="lesscss-1.4.0.min.js"></script>
特别注意：这里浏览器使用的是ajax来拉取.less文件，所以如果文件是file://开头和跨域的情况，就无法拉取less文件，还有就是部分服务器（IIS居多）会对未知的后缀名的文件返回404，解决方案就是为.less文件配置MIME值为text/css，或者直接将.less文件改名为.css文件即可
Webstorm 中的less的使用
如何让less文件直接编译成css文件
每次要修改less，都要修改编译一下less，比较麻烦。所以在webstorm中进行自动化编译。
打开webstorm --> 新建一个less文件夹 --> 新建一个文件File --> 名称是test.less --> 此时在屏幕上会出现一句话
这句话的意思是，要不要监听less，让其自动化编译生成css文件，点击Add watcher，会弹出一个对话框：
这个对话框中的东西我们只关心画框的部分就可以了，这个地址是我们刚才进行离线安装的地址，如果是空的的话就把地址进行手动的复制。点击ok就可以自动的进行编译了。
在less中写语法之后，可以看到右边的目录中，less文件有一个箭头，点开其目录下自动生成了一个css文件。
那如果没有出现Add watcher那句话，怎么配置？
文件 --> 设置 --> 工具 --> File Watchers --> 点击最右边拦的 "+" 号 --> 有一个less --> 也会弹出刚才的对话框 --> 配置完点击确定就可以了。
如何在Webstorm中配置less文件的模板
在文件夹中新建 --> 新建 --> 编辑文件模板 --> 点击上面的 "+" 号 --> 名称 less file / 扩展（后缀名） less --> 内容写 @charset "utf-8"; --> 确定
这样就在新建的文件中配置好了less的文件。
Less语法
注释
/*这个注释可以在css中使用，也可以在less中使用*/
// 这个注释可以在less中使用，但是因为css不支持，所以这种类型的注释是没有办法编译到css文件中的
变量（variable）
变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分的方便。
规则：
less 变量以@作为前缀，不能以数字开头， 不能包含特殊字符。
使用：
/*定义了一个变量*/
@mainColor:#ff4400;
a:hover{
color:@mainColor;
}
p{
border: 1px solid @mainColor;
}
/*也可以进行变量的拼接*/
@left:left;
/*拼接使用的时候要大括号包住*/
border-@{left}: 1px solid @mainColor;
Mixin混入
什么是混入，这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class A轻松的引入到class B中，从而简单实现class B继承所有class A的属性。
定义的时候前面要加点。
类名混入
假如我定义了一个按钮1，按钮中有一些属性，我在别的地方又有一个按钮2，要加上这个按钮1的属性，和一些别的属性，如果按照css的方式我要重新写一遍，那我就需要进行混入了。
来上代码：
/*原来的按钮的一些属性和别的属性*/
.btn{
width:200px;
height: 50px;
background: #fff;
}
.btn_border{
border: 1px solid #ccc;
}
.btn_danger{
background: red;
}
.btn_block{
display: block;
width: 100%;
}
/*对css类的样式进行混入*/
.btn_b_d_b{
.btn();
.btn_border();
.btn_danger();
.btn_block();
}
函数混入
上面的东西有一些不好的地方，就是虽然我写的时候比较简洁了，但是编译的时候还是全部都编译进去了。这个时候可以混入函数。(具体的函数知识在后面写的)
.btn(){
width:200px;
height:200px;
background: #fff;
}
.btn_border(){
border:1px solid #ccc;
}
.btn_b{
.btn();
.btn_border();
}
这样这里面的.btn和.btn_border都不会显示到css文件之中去，可以降低css中的代码冗余。但是如果我要对样式的具体值进行改变呢，就涉及到参数了
带参数的函数混入
注意：在定义参数要传入默认值，如果没有默认值，调用的时候必须要传入值
/*less这样会报错*/
.btn_border(@len){
border:1px solid #ccc;
}
.btn_b{
.btn();
.btn_border();
}
/*两种解决方案*/
/*1.在定义的时候传入默认值*/
.btn_border(@len:10px){
border:1px solid #ccc;
border-radius:@len;
}
.btn_b{
.btn();
.btn_border();
}
/*如果是上面的写法，最终的border-radius是10px*/
.btn_b{
.btn();
.btn_border(20px);
}
/*如果调用的时候传入参数了，最终是20px*/
/*2.定义的时候没有默认值，在调用的时候传入值*/
.btn_border(@len){
border:1px solid #ccc;
border-radius:@len;
-webkit-border-radius:@len;
-moz-border-radius:@len;
-ms-border-radius:@len;
-o-border-radius:@len;
}
.btn_b{
.btn();
.btn_border(10px);
}
嵌套
嵌套可以增强代码的层级关系，我们也可以通过嵌套来实现继承，这样很大程度减少了代码量，代码量看起来更加清晰。
.nav{
border-bottom: 1px solid #ccc;
font-size: 12px;
color:#666;
a {
color:#666;
}
> .container{
line-height: 40px;
text-align: center;
> div{
height:40px;
~ div{
border-left:1px solid #ccc;
}
}
}
}
这个时候要注意一个问题，就是如果在写伪元素、交集选择器的时候，就会出现问题，直接写嵌套中间会默认的加上空格。那么如何拼接上去呢？
/*下面就是如何书写伪元素和交集选择器的写法，前面要加&*/
.nav{
font-size:12px;
&:hover{
text-decoration:none;
}
&::before{
content:"";
}
}
Import（引用）
用less写文件的时候，可以一个模块写一个less，但是index里面都要引用，引用那么多个less文件就不合适了，这个时候就要建立一个总的less，这是有一种解耦的开发思想，"高内聚，低耦合"。
下面来梳理一下结构：
<less里面所需要的模块>
- 变量
- 函数
- 功能模块（视自己的情况而定）
- 总（引用变量、函数、功能模块）
如何引入？
@import "variable.less"; /*引入变量，后面可以加后缀*/
@import "mixin"; /*引入函数*/
@import "topBar"; /*引入功能模块1*/
@import "navBar"; /*引入功能模块2*/
函数（内置函数和运算）
js中有两种定义函数的方式
1.function fun(){ }
2.var fun = function(){ }
less中定义函数
a{
color:red/2; /*结果是#800000*/
}
li{
width:100%/7; /*每个li标签的宽度都是ul的1/7 */
}
.a(@len:12){
width:100%/@len;
color:lighten(#ddd,10%); /*亮度提高10%，结果是#f7f7f7*/
}
col-xs-1{
.a();
}
内置函数
具体的有函数手册
字符串函数
- escape(@string); // 通过 URL-encoding 编码字符串
- e(@string); // 对字符串转义
- %(@string, values...); // 格式化字符串
综合类函数
- unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
- color(@string); // 将字符串解析为颜色值
- data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
算数函数
- ceil(@number); // 向上取整
- floor(@number); // 向下取整
- percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
- round(number, [places: 0]); // 四舍五入取整（第二位是精度）
- sqrt(number); // * 计算数字的平方根（参数可以带单位）
- abs(number); // * 数字的绝对值（参数可以带单位）
- sin(number); // * sin函数（没有单位默认弧度值）
sin(1deg); //1角度角的正弦值 0.01745240643728351
sin(1grad); //1百分度角的正弦值 0.015707317311820675
/*百分度是将一个圆周分为400份，每份为一个百分度，英文gradian，简写grad*/
- asin(number); // * arcsin函数
- 参数-1到1之间的浮点数，返回值弧度为单位，区间在-PI/2 到 PI/2 之间，超出范围输出NaNrad
- cos(number); // * cos函数
- 与sin函数一样
- acos(number); // * arccos函数
- 参数-1到1之间的浮点数，返回值弧度为单位，区间在 0 在 PI 之间，超出范围输出NaNrad
- tan(number); // * tan函数
- 与sin函数一样
- atan(number); // * arctan函数
- 返回值区间在 -PI/2 到 PI/2 之间，其余和asin一样
- pi(); // * 返回PI
- pow(@base, @exponent); // * 返回@base的@exponent次方
- 返回值和@base有相同的单位，第二个单位忽略，不符合规则返回NaN
- mod(number, number); // * 第一个参数对第二个参数取余
- 返回值与第一个参数单位相同，可以处理负数和浮点数
- convert(number, units); // * 在数字之间转换
- unit(number, units); // * 不转换的情况下替换数字的单位
颜色函数
- color(string); // 将字符串或者转义后的值转换成颜色
- 见综合函数
- rgb(@r, @g, @b); // 转换为颜色值
- 参数是整数0-255，百分比0-100%，转化为十六进制
- rgba(@r, @g, @b, @a); // 转换为颜色值
- 参数前三个是整数0-255，百分比0-100%，第四个是0-1或者百分比0-100%，
- argb(@color); // 创建 #AARRGGBB 格式的颜色值
- 使用在IE滤镜中，以及.NET和Android开发中
- hsl(@hue, @saturation, @lightness); // 创建颜色值
- 通过色相、饱和度、亮度三种值
- @hue ： 整数0-360 表示度数
- @saturation ： 百分比0-100% 或者数字 0 - 1
- @lightness： 百分比0-100% 或者数字0 - 1
- 返回值十六进制的颜色值
/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);
/*这里@new 将使用@old 的色相值，以及它自己的饱和度和亮度*/
- hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
- hsv(@hue, @saturation, @value); // 创建颜色值
- @hue 表示色相 ， 整数0-360表示度数
- @saturation 表示饱和度，百分比0-100% 或数字0-1
- @value 表示色调，百分比0-100% 或数字0-1
- 创建不透明的颜色对象
hsv(90,100%,50%)
输出#408000
- hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
- hue(@color); // 从颜色值中提取 hue 值（色相）
- 返回值0-360的整数
hue(hsl(90,100%,50%))
输出 90
- saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
- 返回值 百分比0-100
saturation(hsl(90,100%,50%))
输出 100%
- lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
- 返回0-100的百分比值
lightness(hsl(90,100%,50%))
输出 50%
- hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
- 返回0-360 的整数
- hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
- 返回0-100百分比
- hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
- 返回0-100百分比
- red(@color); // 从颜色值中提取 'red' 值（红色）
- 返回整数0-255
- green(@color); // 从颜色值中提取 'green' 值（绿色）
- 返回整数0-255
- blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
- 返回整数0-255
- alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
- 返回浮点数0-1
- luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
- 返回百分比0-100%
颜色运算（Color operations）
颜色值运算有几点注意事项：
参数必须单位/格式相同
百分比将作为绝对值处理，10%增加10%，是20%而不是11%
参数值只能在限定的范围内
返回值的时候，除了十六进制外将其他格式做简化处理
- saturate(@color, 10%); // 饱和度增加 10%
- desaturate(@color, 10%); // 饱和度降低 10%
- lighten(@color, 10%); // 亮度增加 10%
- darken(@color, 10%); // 亮度降低 10%
- fadein(@color, 10%); // 不透明度增加 10%，更不透明
- fadeout(@color, 10%); // 不透明度降低 10%，更透明
- fade(@color, 50%); // 设定透明度为 50%
- spin(@color, 10); // 色相值增加 10
- 向任意方向旋转颜色的色相角度，旋转范围是0-360，超过将从起点继续旋转，比如旋转360和720是相同的结果。
- 需要注意的是，颜色要通过 RGB 进行格式转换，这个过程不能保留灰色的色相值（灰色没有饱和度，色相值也就没有意义了），因此要通过函数保留颜色的色相值
- 因为颜色值永远输出为RGB格式，因此spin()函数对灰色无效
- mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
- 第三个参数是平衡两种颜色的百分比，默认是50%
- greyscale(@color); // 完全移除饱和度，输出灰色
- 与desaturate(@color, 100%)效果相同
- contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
- 比较颜色的，比较复杂，等用到的时候再说吧
颜色混合（Color blending）
颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似，因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。
- multiply(@color1, @color2);
- 分别将两种颜色的RGB三种值做乘法运算，然后再除以255，输出的结果是更深的颜色
- 对应ps中的“变暗/正片叠底”
- screen(@color1, @color2);
- 结果是更亮的颜色，对应ps中的“变亮/滤色”
- overlay(@color1, @color2);
- 结合前面两个函数的效果，让浅的更浅，深的更深，类似于ps中的“叠加”
- 第一个参数的叠加的对象，第二个参数是被叠加的颜色
- softlight(@color1, @color2);
- 与overlay效果相似，只是当纯黑色和纯白色作为参数的时候输出结果不是纯黑纯白，对应ps中的“柔光”
- 第一个参数是混合色（光源），第二个参数是被混合的颜色
- hardlight(@color1, @color2);
- 与overlay效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，对应ps中的“强光/亮光/线性光/点光”
- 第一个参数是混合色（光源），第二个参数是被混合的颜色
- difference(@color1, @color2);
- 从第一个颜色值中减去第二个，输出是更深的颜色，对应ps中的“差值/排除”
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
- exclusion(@color1, @color2);
- 效果和difference函数效果相似，只是输出结果差别更小，ps中的“差值/排除”
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
- average(@color1, @color2);//对RGB三种颜色取平均值
- negation(@color1, @color2);
- 和difference函数效果相反，输出结果是更亮的颜色
- 注意：效果相反不代表做加法运算
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
判断函数
- iscolor(@colorOrAnything); // 判断一个值是否是颜色
- isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
- isstring(@stringOrAnything); // 判断一个值是否是字符串
- iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
- isurl(@urlOrAnything); // 判断一个值是否是url
- ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
- ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
- isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
- isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值
含*号的函数只在1.4.0 beta以上版本中可用
Bootstrap中less的定制
了解Bootstrap中less模块机制
- 在Bootstrap的less文件夹中有一个总文件是bootstrap.less
- 里面有导入的变量、函数、基础样式（初始化文件、图标）、核心样式、组件、javascript组件等
- 在函数mixins.less中引用了很多的模块的函数
- 里面有弹出框、有按钮、有面板等很多的模块
如何定制Bootstrap
线下定制
找到bootstrap的源码 --> less文件夹 --> 修改源码 --> bootstrap.less
比如：
Bootstrap默认的栅格系统有12列，间距15px，如果需要改的时候，修改变量Grid system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px
类似于这样修改完毕之后进行编译，shift+鼠标右键 --> 此处打开命令窗口 --> lessc bootstrap.less bootstrap.css --> 回车
线上定制
定制并下载 -->不要哪个就把勾去掉 --> 修改哪个就修改 --> 点击编译并下载
版本的更新说明
在less的1.4.0的版本已经更新了，这个版本中引入了一些新的特性。什么派生啦，新的数学函数啦，还有严格运算模式啦，有兴趣的可以深入的了解一下。
