less的基本使用

less编译器

1、less.js
当页面运行的时候，把less编译成css
2、考拉编译
写的时候就把less编译成css，html直接引用css
下载地址：http://www.openkoala.org/download.html
3、node编译

less变量

1、变量的定义

@变量名：值

2、变量的使用
作为属性值使用：@变量名
作为选择器或者属性名使用：@{变量名}

变量的作用域

先从本作用域找，没有再去上层作用域找，在同一作用域下，变量定义两次，后面的会覆盖前面的

less注释

1、/* css注释，编译成css后依然存在 */
2、// less注释，编译成css后不显示

less混合

1、普通混合（会在css样式中编译输出）

.混合名｛
   // css样式
｝
.混合名()

2、不会输出的混合

.混合名()｛
	   // css样式
	｝
.混合名();       //混合没有参数时，可省略()

3、带参数的混合

.混合名(@变量名1, @变量名2)｛
	   // css样式
	｝
.混合名(c参数值1, 参数值2);  

4、参数有默认值的混合 （有默认值的参数在后面）

 .混合名(@变量名1, @变量名2:参数值2)｛
    	   // css样式
    	｝
 .混合名(c参数值1);  
 .混合名(c参数值1, 新参数值2);  

5、参数有默认值的混合 （有默认值的参数在任意位置）

	.混合名(@变量名1:参数值1, @变量名2)｛
        	   // css样式
        	｝
     // 调用的时候指定参数名
    .混合名(@变量名2:参数值2); 
    .混合名(@变量名1:参数值1, @变量名2:参数值2);  // 调用的时候指定参数名

6、@arguments 获取所有参数

	.混合名(@变量名1, @变量名2, @变量名3, @变量名4)｛
            	属性名: @arguments  
            ｝

特殊情况：调用混合的时候，参数之间可用逗号隔开，也可用分号隔开

less条件判断

写多个混合，配合关键字when

 	.混合名(@变量名1, @变量名2, @变量名3, @变量名4) when (@变量名1 = 值1)｛
               // css样式
            ｝
    .混合名(@变量名1, @变量名2, @变量名3, @变量名4) when (@变量名1 = 值2)｛
               // css样式
            ｝
    .混合名(@变量名1, @变量名2, @变量名3, @变量名4) when (@变量名1 = 值3)｛
               // css样式
            ｝

less导入

页面样式拆分成很多个less
通常会把混合单独写成less文件
把定义变量的部分单独写成less文件

@import '文件路径'

导入less文件可以省略后缀