less是什么，用途，怎么用，使用中的问题，注意事项，
1.LESS是一种由Alexis Sellier设计的动态层叠样式表语言。第一个版本由Ruby写，逐渐被替换为JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino).
2.LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件.
3.LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
意义：
改变传统样式的编写方式，以面向对象的方式编写，提高开发效率.
怎么用:
在服务器端，如Node.js，我们有专门的less编译模块。如果是在客户端，需要从LESS官网下载less.js文件，然后在HTML页面中引入.？？？
CDN (内容分发网络,其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度，减少服务器的压力。CDN最常用的用途是用来给终端用户发布静态文件，如图片、java脚本、css文件等。请注意，该服务仅仅用于处理静态文件，如主要的网站页面，所有动态内容，都是由主网站服务器提供。这通常是分开处理的，通过不同的子域名进行处理，如images.mydomain.com，与www.是分开的。)
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
注意事项：
在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中？？？，对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。（使用Grunt插件，实现一个简单的Web服务器，同时有一个文件监听功能，监听less文 件的修改，然后将修改的Less实时编译为CSS。）
一、定义变量：@width:150px;@color:#f5f5f5;把重复用到的写成变量，注意只能定义一次，本质是常量；
@bgcolor:#000;@hoverbgcolor:dark(@bgcolor,10%);
Less中的变量有以下规则：
用于 选择器部件，必须使用"@{变量名}" 的形式
less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数
@colors: #FFF, #0F0, #F0F;
.skin{
color: extract(@colors, 0);
height: 12px * length(@colors);
}
-------------------------------------------
.skin{ color: #FFF; height: 36px; }
3. 嵌套(Nested)
4. 父选择器引用(ParentSelector)
&::after等方式添加伪元素、伪类样式规则集合Less源码：
/*
* 采用&引用完整的父选择器
* 可通过追加和预追加的方式加工&，从而生成新的选择器
* 通过&::after等方式添加伪元素样式规则集合
* 同一个选择器可使用多个&
* 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
*/
@bg: #aaa;
#ps1 .btn{
background-color: @bg;
border-radius: 5px;
&:hover{
background-color: lighten(@bg, 30%);
cursor: pointer;
}
&-msg, &-eof{
color: blue;
}
.no-borderradius &{
background-image: url(‘img/btn-bg.png‘);
}
}
/*
* &指向组选择器时，会生成新的组选择器
*/
#dummy1, .dummy1{
&:hover{
color: red;
}
& + &{
font-size: 12px;
}
}
最终输出：
5. 导入指令(Import)
less样式文件可通过 @import ‘文件路径‘; 引入外部的less文件。
注意：
@import可出现在任何位置，而不像css的@import那样只能放在文件第一行。
另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为： @import (reference)‘文件路径‘; 。下面为各配置项的具体说明：
extend和mixins的方式引用样式库的内容。@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件6. 继承(Extend)
有两种语法形式， <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); }
Less源码：
.animal{
color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
width: 100px;
height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
&:extend(.animal);
width: 50px;
height: 50px;
}
最终输出：
.animal,
.bear,
.deer {
color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
width: 100px;
height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
width: 50px;
height: 50px;
}
注意事项：
*.parent{
height: 100px;
.hair{
color: #f27;
}
[name=eyes]{
color: #768;
}
}
// 匹配失败
.son:extend(.parent){}
.son:extend(.hair){}
// 匹配成功
.son:extend(*.parent [name=‘eyes‘]){}
.son:extend(*.parent [name="eyes"]){}
// all关键字会匹配所有包含parentSelector内容的选择器，并以selector替换parentSelector来生成新的选择器，parentSelector没有了。
// 下面的内容会生成 *.son，*.son .hair，*.son [name=eyes]三个新的选择器
.son:extend(.parent all){}
最终输出：
*.parent,
*.son {
height: 100px;
}
*.parent .hair,
*.son .hair {
color: #f27;
}
*.parent [name=eyes],
.son,
.son,
*.son [name=eyes] {
color: #768;
}
Less源码：
@p1: .parent1;
@p2: .parent2;
.parent1{
height: 100px;
}
@{p2}{
height: 200px;
}
// 匹配失败
// 形式1，不支持以变量作入参
.son1:extend(@{p1}){}
// 形式2，不支持以变量作为选择器的规则集合
.son1:extend(.parent2){}
// 匹配成功
.son2:extend(.parent1){}
@s3: son3;
.@{s3}:extend(.parent1){}
最终输出：
.parent1,
.son2,
.son3 {
height: 100px;
}
.parent2 {
height: 200px;
}
6.3.1. media query内的extend操作，仅能继承当前块的其他选择器样式。
注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。
Less源码：
.parent1{
height: 200px;
}
@media screen{
.parent1{
height: 100px;
}
// 无法继承子media query块的选择器样式
.son1:extend(.parent2){}
@media (min-width: 1023px){
// 继承父media query块的选择器样式
.son2:extend(.parent1){}
.parent2{
width: 200px;
}
}
}
最终输出：
.parent1 {
height: 200px;
}
@media screen {
.parent1 {
height: 100px;
}
}
@media screen and (min-width: 1023px) {
.parent2 {
width: 200px;
}
}
6.3.2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式。
Less源码：
@media screen{
.parent{
height: 100px;
}
@media (min-width: 1023px){
.parent{
width: 200px;
}
}
}
.son:extend(.parent){}
最终输出：
@media screen {
.parent,
.son {
height: 100px;
}
}
@media screen and (min-width: 1023px) {
.parent,
.son {
width: 200px;
}
}
6.4. 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。？？？？
Mixin相当于macro，会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点：
.animal{
.human{
#fsjohnhuang{
.hair{
color: #000;
}
}
}
}
.front-end-monkey{
// 或者.animal.human#fsjohnhuang.hair();
// 或者.animal>.human>#fsjohnhuang>.hair;
// 或者.animal>.human>#fsjohnhuang>.hair();
// 即可调用mixin
.animal.human#fsjohnhuang.hair;
}
最终输出：
.animal .human #fsjohnhuang .hair {
color: #000;
}
.front-end-monkey {
color: #000;
}
7.2. 显示定义不带参数和带参数的样式库(mixin库)，不会输出到最终输出中，仅供调用；
Less源码：
// 定义不带参数的mixin
.animal(){
color: #000;
}
// 定义带参数的mixin
// 注意：由于,和;均可用于作为参数分隔符，但由于如background、border等样式属性支持属性值组，而,则作为属性值组元素分隔符，因此推荐使用;作为参数分隔符
.dog(@type; @age){
height: @type * @age * 12px;
}
// 定义带参数默认值的mixin
.cat(@type; @age:1){
height: @type * @age * 5px;
}
// 调用才会出现在最终输出
.chihuahua{
.dog(1;2);
}
最终输出：
.chihuahua {
height: 24px;
}
7.3. mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
Less源码：
.dog(@type;@age;@rest...){
height: @type * @age * 12px;
border: @rest;
}
.cat(@solid;@w;@color){
border: @arguments;
}
.chihuahua{
.dog(1;2;solid;1px;red);
}
.mimi{
.cat(solid;2px;blue);
}
最终输出：
.chihuahua {
height: 24px;
border: solid 1px red;
}
.mimi {
border: solid 2px blue;
}
7.4. mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。
Less源码：
.dog(@name){
&::after{
content: @name;
}
}
.dog(@name;@age){
height: @age * 4px;
}
.dog(@name;@age;@width:20px){
height: @age * 12px;
width: @width;
}
// 仅匹配到 .dog(@name){
.one-dog{
.dog(‘chihuahua‘);
}
// 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width:20px)
.two-three-dog{
.dog(‘two-three-dog‘, 2);
}
// 参数的模式匹配
// 当第一参数值为mimi时调用该mixin
.cat(mimi, @age){
height: @age * 22px;
}
// 当第一参数值为mini时调用该mixin
.cat(mini, @age){
height: @age * 12px;
}
// 不管第一参数值为啥均调用该mixin
.cat(@any, @age){
color: #f3c;
}
.mycat{
.cat(mini, 1);
}
最终输出：
.one-dog::after {
content: ‘chihuahua‘;
}
.two-three-dog {
height: 8px;
height: 24px;
width: 20px;
}
.mycat {
height: 12px;
color: #f3c;
}
Less中通过混合（Mixin）后的when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。
Less源码：
// 条件匹配 // true值匹配，仅实参为true时才匹配成功 .truth(@a) when (@a){ &::after{ content: @a; } } // 匹配成功 .truth1{ .truth(true); } // 匹配失败 .truth2{ .truth(#fff); } /* 类型判断函数 * iscolor * isnumber * isstring * iskeyword * isurl */ .bear(@color) when (iscolor(@color)){ color: @color; } /* 单位判断函数 * ispixel * ispercentage * isem * isunit */ .bear(@height) when (ispixel(@height)){ height: @height; } // =,>,>=,<=,< 关系运算符 .rich(@h) when (@h > 1000){ height: @h; } // and、not、or(使用,号表示) 逻辑运算符 .huge(@h, @w) when (@h > 180) and (@w > 180){ height: @h; width: @w; } // 使用& when()实现if语句 @debug: true; & when (@debug){ div{ border: solid 1px red; } } // 通过递归实现循环 .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
最终输出：
.truth1::after {
content: true;
}
/* 类型判断函数
* iscolor
* isnumber
* isstring
* iskeyword
* isurl
*/
/* 单位判断函数
* ispixel
* ispercentage
* isem
* isunit
*/
div {
border: solid 1px red;
}
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：
1. 运算数与运算符间必须用空格分隔；
2. 以第一个运算数的单位作为运算结果的单位；
Less源码：
// 运算数与运算符间没有空格
@fail: 1px +2em;
.fail{
height: @fail;
}
@success1: 1px + 2em;
.success1{
height: @success1;
}
@success2: 2em + 1px;
.success2{
height: @success2;
}
最终输出：
.fail{
height: 1px 2em;
}
.success1{
height: 3px;
}
.success2{
height: 3em;
}
Less为我们提供了一个功能强大的内置函数库，其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。
示例：
// for teenager
.person(@age) when (@age <= 19) and (@age >=13){
height: @age * 10px;
}
// for child
.person(@age) when (@age <13){
height: @age * 6px;
}
// for adult
.person(@age) when (default()){
height: 180px;
}
.son{
.person(10);
}
.daughter{
person(17);
}
.father{
.person(27);
}
最终输出：
.son{
height: 60px;
}
.daughter{
height: 170px;
}
.father{
height: 180px;
}
虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中，充当else或switch语句中default的角色。
通过官网提供的综合示例我们可以更好理解它的用法：
// Less源码
.x {
.m(red) {case-1: darkred}
.m(blue) {case-2: darkblue}
.m(@x) when (iscolor(@x)) and (default()) {default-color: @x}
.m(‘foo‘) {case-1: I am ‘foo‘}
.m(‘bar‘) {case-2: I am ‘bar‘}
.m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}
&-blue {.m(blue)}
&-green {.m(green)}
&-foo {.m(‘foo‘)}
&-baz {.m(‘baz‘)}
}
// 最终输出
.x-blue {
case-2: #00008b;
}
.x-green {
default-color: #008000;
}
.x-foo {
case-1: I am ‘foo‘;
}
.x-baz {
default-string: and I am the default;
}
注意：
1. default函数必须在条件控制语句当中使用；
2. default函数可实现比else更复杂的功能，如下：
// Less源码
.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default()) {padding: (@value / 5)}
div-1 {
.mixin(100px);
}
div-2 {
/* ... */
.mixin(100%);
}
// 最终输出：
div-1 {
width: 100px;
padding: 20px;
}
div-2 {
/* ... */
}
顾名思义就是对字符串中的特定字符进行编码，该函数将对\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ 和 =字符进行编码。
颜色处理函数又分为四大类：颜色定义函数(Color Definition)(
@new: hsl(hue(@old), 45%, 90%);,hsla,hsv(用于Photoshop中可用色彩空间),)、颜色通道值获取函数(Color Channel)(获取你想要的R,G,B,A等等)、颜色通道值修改函数(Color Operation Function)（操作颜色变亮变暗变其他颜色）、混色函数(Color Blending)。
分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色。（译注：对应Photoshop中的“变暗/正片叠底”。）
这里仅仅介绍常用的lighten和darken函数。
lighten(color, amount) ，color为颜色，amount为增加的亮度值，取值范围为0-100%。
darken(color, amount) ，color为颜色，amount为减少的亮度值，取值范围为0-100%。
与
multiply函数效果相反，输出结果是更亮的颜色。（译注：对应Photoshop中的“变亮/滤色”。）
。。。。。。。。
数学函数：
ceil(2,4)向上取整3，
floor(2,6)向下取整2，
percentage（0.5）将浮点数转成百分比字符串50%，
round（1.67,1）四舍五入取整，1.7，第二参数默认为0；
计算一个数的平方根，并原样保持单位
计算数字的绝对值，并原样保持单位。
正反余弦正弦正切
返回圆周率 π (pi);
设第一个参数为A，第二个参数为B，返回A的B次方。
返回第一个参数对第二参数取余的结果。
返回一系列值中最小的那个。
返回一系列值中最大的那个。
对字符串中的特殊字符做 URL-encoding 编码。
,, /, ?, @, &, +, ‘, ~, ! and $。\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。参数：string: 需要转义的字符串。
返回值：转义后不带引号的 string 字符串。
案例：
escape(‘a=1‘)
输出：
a%3D1
注意：如果参数不是字符串的话，函数行为是不可预知的。目前传入颜色值的话会返回 undefined ，其它的值会原样返回。写代码时不应该依赖这个特性，而且这个特性在未来有可能改变。
用于对 CSS 的转义，已经由
~"value"语法代替。
它接受一个字符串作为参数，并原样返回内容，不含引号。它可用于输出一些不合法的 CSS 语法，或者是使用 LESS 不能识别的属性。
参数：string - 需要转义的字符串。
返回值： string - 转义后的字符串，不含引号
案例：
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
输出：
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意：也接受经 ~"" 转义的值或者是数字作为参数。任何其它的值将产生错误。
此函数
%(string, arguments ...)用于格式化字符串。
第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头，后面跟着字母 s、S、d、D、a 或 A。后续的参数用于替换这些占位符。如果你需要输出百分号，可以多用一个百分号来转义 %%。
使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。 此函数将会对所有的特殊字符进行转义，除了 ()‘~! 。空格会被转义为%20 。小写的占位符将原样输出特殊字符，不进行转义。
占位符说明：
d, D, a, A - 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用，则整个字符串都会被使用，包括引号。然而，引号将会按原样放在字符串中，不会用 "/" 或类似的方式转义。s, S - 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用，则只有字符串的值会被使用，引号会被忽略。参数：
string: 有占位符的格式化字符串。anything* : 用于替换占位符的值。返回值： 格式化后的 字符串（string）.
案例：
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %(‘repetitions: %A file: %D‘, 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %(‘repetitions: %S file: %S‘, 1 + 2, "directory/file.less");
输出：
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
用一个字符串替换一段文本。
添加于 v1.7.0 版本
参数：
string: 用于搜索、替换操作的字符串。pattern: 用于搜索匹配的字符串或正则表达式。replacement: 用于替换匹配项的字符串。flags: (可选) 正则表达式参数。返回值： 被替换之后的字符串。
案例：
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace(‘This is a string.‘, "(string)\.$", "new $1.");
replace(~"bar-1", ‘1‘, ‘2‘);
输出：
"Hello, Earth!";
"2 + 2 = 4";
‘This is a new string.‘;
bar-2;color：解析颜色值，将代表颜色的自负转成颜色值，
convert:将数字从一种单位转换成另一种单位，
unit(5em);返回5；
原文：http://www.cnblogs.com/zhangxinxin111/p/4710590.html