less

less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin(混合)、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 (引入less脚本文件),也可以借助Node.js在服务端运行。

less的中文官网:http://lesscss.cn/ bootstrap中less教程:http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:www.koala-app.com

less中的注释

以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来申明一个变量:@name:value;   //@变量名:值
1.作为普通属性值只来使用:直接使用变量名  @name
2.作为选择器和属性名时要使用 @{name}  的形式
3.作为URL:例如:   @p : 323911.jpg;
                  使用时  background-image: url("@{p}");
4.变量的延迟加载:即对所有变量的声明都会提到最前,变量提升

less中的嵌套规则

1.基本嵌套规则:子元素写到父元素中
2.&的使用:去掉编译后父子中间的空格,即让子元素成为父元素的同级
         例如:.father{
                    &:hover{
                    }
              }
              
      编译后为:.father{}
              .father:hover{}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式,类似于引用
例:定义一个混合内容 .mixin{font-size:20px;}

1.普通混合                :混合的内容会添加到编译后的css文件中

2.不带输出的混合           :在混合名称后添加一个空括号,
                           混合内容将不会添加到编译后的css文件中
                           .mixin(){font-size:20px;}
                        
3.带参数的混合              :定义混合时设置形参,在调用时即可传入对应的参数
                           定义一个混合   .mixin(@a){font-size:@a;}
                           
4.带参数并且有默认值的混合    :在参数后面添加 :value 及为参数的默认值
                    	    定义一个混合   .mixin(@a:20px){font-size:@a;}
                    	    
5.带多个参数的混合           :多个参数之间用逗号隔开

6.命名参数                  :当混合中有多个参数时,只想给其中一个参数传入值,
                            那么调用时可以知名是哪个参数 指明形式为 [参数名:值]
                            
7.匹配模式                  :定义混合时,可在前面加一个标识符来区分不同的混合,
                            调用时也要用此标识符来指明

8.arguments变量             :缩写方法,例如定义一个混合时:
                                  .mixin(@size,@solid,@color){
                                  border:@arguments;
                         // 相当于 border: @size @soild @color;
                         }

less运算

在less中可以进行加减乘除的运算

less避免编译

~"不被编译的内容",预处理器将不会编译此内容

less继承

性能比混合高
灵活度比混合低
例如:.mixin(){font-size:20px;}
那么使用继承时:
   .div:extend(.mixin){
         background-color: red;
    }


编译后的形式为:.mixin , .div{
               background-color: red;
              }
              
            .div{
               background-color: red;
              }