less的介绍和基本使用

less

• less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Minix、函数等特性，使css更易维护和扩展
• less可以在客户端上运行，也可以借助node.js在服务端运行

less 编译

• 运行时编译
  可以在less官网下载less.js文件，并在less样式的下方引入，这样在运行时，less.js就会把less编译成浏览器可以识别的css了

  <style type="text/less">	// 类型需要指定为less
  // 开始写less的样式
  </style>
  <script src="less/less.js"></script>	// 在样式的后面引入less.js
  

• 预编译
  还可以使用less的编译工具，例如koala，将写好的less文件直接编译成css供浏览器使用，

less中的注释

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

less中的变量

• 使用@来申明一个变量： @pink:pink;

1. 作为普通属性值来使用: 直接使用@pink

   	@color: pink;	// 定义变量
   	* {
        
   		color: @color;	// 使用变量
   	}
   

2. 作为选择器和属性名: @{selector}的形式

   	/*不常用的方式*/
   	@m:margin;	// 定义的变量为属性名时
   	* {
        
   		@{
        m}: 0;	// 使用的时候需要加大括号
   	}
   	@selector: #wrap;	// 定义的变量为选择器时
   	@{
        selector} {
        	// 使用的时候需要加大括号
   		...
   	}
   

3. 作为URL: @{url}

4. 变量的延迟加载

   @var: 0;
   .class {
        
   	@var: 1;
   	.brass {
        
   		@var: 2;
   		three: @var;	// three的值是3
   		@var: 3;
   	}
   	@one: var;			// one的值是1
   }
   // 在less中