5分钟快速入门 - Less

下面给大家讲解下Less，纯手工，入门级别，相信没学过的人阅读完后就懂了，以下是我要讲的四点：

• 简单介绍

　　　　Less CSS 是一个使用广泛的 CSS 预处理器。

　　　　对 CSS 进行扩展，减少很多 CSS 的代码量。

　　　　LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数.

　　　　LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js).

• 快速入门　　　

　　　　在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：

$ npm install -g less

　　　　安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：

$ lessc gloal.less

　　　　你可以将输出重定向到一个文件：

$ lessc gloal.less > gloal.css

• 常用语法　

1.变量

@color: #4d926f; 
#header { color: @color; }

#header { color: #4d926f; }

@color: #253636; 
@color: #ff3636;     //覆盖第一次的定义
#header {color: @color;}        //多次反复解析

#header {color: #ff3636;}

 

2.Mixins——混入, 类似函数或宏

.borderRadius(@radius:3px){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 

#header { .borderRadius(10px); } 

.btn { .borderRadius} 

编译后：

#header { 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
.btn {
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
}  

Mixins注意事项：

a.可以不使用参数 .wrap(){…} .pre{ .wrap }

b.内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; } 注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。

c. Mixins必须使用ID或者类，即#xx或.xx，否则无效。

 

3.嵌套　　　

#header { 
    &.fl{ float: left; }
     .mln { margin-left: 0; } 
   } 


  #header.fl{float: left;} 
  #header .mln {margin-left: 0;}

 

4.运算&函数

@init: #111111; 
 @transition: @init*2; 
 .switchColor { 
     color: @transition;     
 }
.switchColor { 
   color: #222222; 
 }
.lightColor{
   lighten(@color, 10%);
}

运算主要是针对任何数字、颜色、变量的操作，支持加、减、乘、除、()或者更复杂的综合运算；而Functions主要是针对颜色，同时提供了部分数学函数，具体的API可参阅文档。

 

5.继承　　　　

.animal {  background-color: black;  color: white;}
.bear {  &:extend(.animal);  background-color: brown;}

当前还有其他继承的写法，我这只是写了其中的一种，详细可在官网上查看文档。

　　　

6.作用域

@var: red; 
#page { 
    @var: white;
    #header { color: @var; // white } 
}
#footer { 
    color: @var; // red 
}

Less中的变量、Mixins等的作用域都只是当前文件！

7.注释

　　单行注释方式： //单行注释

　　单行、多行注释： /* 注释 多行注释 */

• 资源分享

　　　　官网：lesscss.org

　　　　中文社区：www.lesscss.net 

　　　　在线LESS编译：http://tool.oschina.net/less

　　　　...