less

LESS

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、 Mixin、函数等特性，使 CSS 更易维护和扩展。

中文网站：http://less.bootcss.com/functions/

变量：less 中的变量，必须以@符号开头，变量为完全的常量，所以只能定义一次，其他的规则遵循变量命名规则，在项目中变量的名称尽量做到见名知意。例：@base-font-size:14px

嵌套：
less文件 >>> 

div{border:1px solid #ccc; font-size:12px;ul{list-style:none;width:100%;height:auto;li{width:100px;height:30px;line-height:30px;text-align:center;&:hover{ color:blue; }}}}

编译后 >>>

div {border:1px solid #ccc; font-size:12px;}div ul{list-style:none;width:100%;height:auto;}div ul li{width:100px;height:30px;line-height:30px;text-align:center;}div ul li:hover{color:blue}

混合：
less文件 >>>


编译后文件 >>>



函数
less文件 >>>


.fn(@arg:20px){}      给函数设置默认值
编译后>>>


运算：　　运算提供了加减乘除的操作，我们可以做属性值和颜色的运算（长度和颜色等）


在客户端编译：

　先link进自己的less文件，设置rel属性值为“stylesheet/less”
   然后引入less.js(请在服务器环境下使用);

   监听模式：在URL后面加上“#!watch” 或者调用less.watch()来启动； 

模式匹配和导引表达式（多态）

   .box(dark){color:red;}       //接受参数dark  
   .box(light){color:blue;}      //接受参数light
   .box(@_){ background-color:yellow }   //接受所有参数
    @switch:light;   .class{ .box(@switch); }

    也可以匹配多个参数。。。


    在函数中使用when关键字可以定义一个导引序列,导引序列使用逗号“，”分割，当且仅当所有条件都符合，才会被视为匹配成功。导引可以无参，也可以对参数进行比较运算。

.fn(@a) when(@a>=50){  color:red;  }
.fn(@a) when(@a<50){ color:blue; }

.fn(@a) when (@a>0), (@a<100){ color:@a }

     使用关键字and实现与条件、通过or实现或、通过not实现非条件

检测函式

iscolor、isnumber、isstring、iskeyword、isurl。

判断一个值是纯数字，还是某个单位量，ispixel、ispercentage、isem

颜色操作
请参考官方文档

Math函数
round(1.67)            //2
ceil(2.4)       //3
floor(2.6)       //2
percentage(0.5)    //50%

命名空间：有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，你可以像下面这样在#bundle中定义一些属性级之后可以重复使用：

module.less      #bundle{  .red{ color:red; }  }
index.less  #bundle > .red;

作用域：
Less中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没有找到的话会去父级作用域中查找，直到找到为止。（即就近原则）


引入外部文件：
可以在main文件中通过引入less文件或者css文件
@import "demo.less";

字符串插值：
用于文件路径
@url:"http://www.baidu.com";
 background-image:url("@{url}/ddd/ddd");


JavaScript表达式
JavaScript表达式也可以在.less文件中使用，可以通过反引号方式使用
@var ： `"hello".toUpperCase()+'!'`

~可以避免编译