Less教程

Less 是一门一种动态样式 语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

客户端使用

下载地址

外联样式

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

内联样式如下：

接下来 下载 less.js 并通过 标签将其引入，放置于页面的 元素内：

注意：你的less样式文件一定要在引入less.js前先引入。

变量

Less中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果

@base:red;
 body{color:@base}
 

混合

在LESS中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性

.bordered {
 border-top: solid 1px red;
 border-bottom: solid 2px green;
 }
 
 
.div1 {
 color: #111;
 .bordered;
 }
 
 
.div2 {
 color: red;
 .bordered;
 }
 

带参数混合

在LESS中，你还可以像函数一样定义一个带参数的属性集合

.border-radius (@radius: 5px) {
 border:1px solid red;
 border-radius: @radius;
 width:300px;
 }
 .div1 {
 .border-radius(0px);
 }
 .div3 {
 .border-radius;
 }
 .div2 {
 .border-radius(20px);
 }
 

arguments

@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量

.pad(@top,@right,@bottom,@left) {
 padding:@arguments;
 }
 div{
 width:400px;
 border:1px solid red;
 .pad(10px,50px,100px,40px)
 }
 p
 {
 background-color: green;
 }
 

模式匹配

有些情况下，我们想根据传入的参数来改变混合的默认呈现

.mixin (red, @color) {
 color: red;
 }
 .mixin (green, @color) {
 color: green;
 }
 .mixin (@_, @color) {
 display: block;
 }
 @switch: red;
 .div1 {
 .mixin(@switch, #888);
 }
 

导引表达式

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用

.mixin (@a) when (@a =red) {
 background-color: red;
 }
 .mixin (@a) when (@a =green) {
 background-color: green;
 }
 .mixin (@a) {
 color: @a;
 }
 .red { .mixin(red) }
 .green { .mixin(green) }
 

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式

#dvi1 {
 color: red;
 
 
p {
 font-size: 12px;
 }
 
 
.logo {
 width: 300px;
 &:hover {
 text-decoration: none
 }
 }
 }
 

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素