一,变量

基本使用

Less:

.@{selector} {     width: 100px;     height: 100px;     @{property}: #000;     background: url("@{bgImg}/test.png");      &:after {         display: block;         content: @@var;     } } @selector: box; @bgImg: "../img"; @property: color; @name: "你好啊"; @var: "name";

生成CSS:

.box {     width: 100px;     height: 100px;     color: #000;     background: url("../img/test.png"); }  .box:after {     display: block;     content: "你好啊"; }

字符串插值

@base-url: "http://abc.com"; background-image: url("@{base-url}/images/bg.png");

选择器插值

//Less @name: blocked; .@{name} {     color: black; }  //输出css .blocked {     color: black; }

二,运算

任何数字、颜色或者变量都可以参与运算

@base: 5%; @filler: @base * 2; @other: @base + @filler;  color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位,括号也同样允许使用,并且可以在复合属性中进行运算:

@var: 1px + 5; width: (@var + 5) * 2; border: (@width * 2) solid black;

三,Mixin混合

基本使用和extend

Less:

/*不加括号显示样式,生成并集选择器组合*/ .public {   width: 100px;   height: 100px; } .public() {   /*加括号隐藏样式,生成在调用者里,代码重复*/   width: 100px;   height: 100px; } nav:extend(.public) {   background-color: #f00; } div {   &:extend(.public);   background-color: #00f; } footer {   .public;   background-color: #cccccc; } 

生成CSS:

/*不加括号显示样式,生成并集选择器组合*/ .public, nav, div {   width: 100px;   height: 100px; } nav {   background-color: #f00; } div {   background-color: #00f; } footer {   /*隐藏样式,生成在调用者里,代码重复*/   width: 100px;   height: 100px;   background-color: #cccccc; }

模式匹配

Less:

.mixin (dark, @color) {   background-color: darken(@color, 10%); } .mixin (light, @color) {   background-color: lighten(@color, 10%); } .mixin (show) {   display: block; } .mixin (hide) {   display: none; }  div {   width: 100px;   height: 100px;   .mixin(show);   //.mixin(hide);   .mixin(dark,red) }

生成CSS:

div {   width: 100px;   height: 100px;   display: block;   background-color: #cc0000; }

命名空间

Less:

/*加括号隐藏了样式 .div命名空间*/ .div() {   width: 200px;   height: 200px;   background-color: #000;    div {     width: 50px;     height: 50px;     background-color: #f00;   }   .color {     color: skyblue;   }   &:hover{     background-color: lighten(rgb(0, 0, 0), 20%);   } } /*这样使用*/ nav {   .div; } nav p {   .div > .color; }

生成CSS:

nav {   width: 200px;   height: 200px;   background-color: #000; } nav div {   width: 50px;   height: 50px;   background-color: #f00; } nav .color {   color: skyblue; } nav:hover {   background-color: #333333; } nav p {   color: skyblue; }

作用域

(类似于JS作用域链,一层一层网上找,找到为止)
Less:

@color: #ccc; .box {   @color: #eee;   .gray {     color: @color;   } } .box2 {   .gray {     color: @color;   } }

生成CSS:

.box .gray {   color: #eeeeee; } .box2 .gray {   color: #cccccc; } 

!important

Less:

.box() {   @color: #eee;   background-color: #f00;   width: 100px;   height: 200px;   .gray() {     color: @color;   } } nav {   /*可以使继承到的混合集所有属性都添加!important*/   .box !important;   .box > .gray; }

生成CSS:

nav {   /*可以使继承到的混合集所有属性都添加!important*/   background-color: #f00 !important;   width: 100px !important;   height: 200px !important;   color: #eeeeee; }

Parametric Mixins(参数混合)

Less:

/*可以设定参数,也可以同时设置默认值*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {   -webkit-transition: @property @duration @function @delay;   -moz-transition: @property @duration @function @delay;   -ms-transition: @property @duration @function @delay;   -o-transition: @property @duration @function @delay;   transition: @property @duration @function @delay; } /*等同于上式,Less中也有arguments*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {   -webkit-transition: @arguments;   -moz-transition: @arguments;   -ms-transition: @arguments;   -o-transition: @arguments;   transition: @arguments; } div1 {   .transition; } div2 {   .transition(@duration: 2s); } div3 {   .transition(@duration: 3s;@property: width;) }

生成CSS:

div1 {   -webkit-transition: all 1s linear 0s;   -moz-transition: all 1s linear 0s;   -ms-transition: all 1s linear 0s;   -o-transition: all 1s linear 0s;   transition: all 1s linear 0s; } div2 {   -webkit-transition: all 2s linear 0s;   -moz-transition: all 2s linear 0s;   -ms-transition: all 2s linear 0s;   -o-transition: all 2s linear 0s;   transition: all 2s linear 0s; } div3 {   -webkit-transition: width 3s linear 0s;   -moz-transition: width 3s linear 0s;   -ms-transition: width 3s linear 0s;   -o-transition: width 3s linear 0s;   transition: width 3s linear 0s; }

Less:

.test(@width:100px;@height:100px;) {   width: @width;   //可以不需要执行体,只为了获得返回值   @result: (@width + @height) / 2; }  div {   .test;   //call the mixin   padding: @result;  //use the return value }

生成CSS:

div {   width: 100px;   padding: 100px; }

高级参数用法与 @rest 变量

.mixin (...) {        // 接受 0-N 个参数 .mixin () {           // 不接受任何参数 .mixin (@a: 1) {      // 接受 0-1 个参数 .mixin (@a: 1, ...) { // 接受 0-N 个参数 .mixin (@a, ...) {    // 接受 1-N 个参数  //此外 .mixin (@a, @rest...) {     // @rest 表示 @a 之后的参数     // @arguments 表示所有参数 }

Mixin Guards(导引表达式/混合保护)

我们可以在mixin中设置条件；常用的条件运算符：>、>=、<、<=、=；我们设定的条件还可以使用IS函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

     //->LESS代码     .mixin (@a) when (lightness(@a) >= 50%) {       background-color: black;     }      .mixin (@a) when (lightness(@a) < 50%) {       background-color: white;     }      .box1{       .mixin(#ddd);     }      .box2{       .mixin(#555);     }      //->编译为CSS的结果     .box1 {         background-color: black;     }      .box2 {         background-color: white;     }

when是在设置条件，除了像上面的写法外，我们还可以通过when设置多个条件，而且条件中可以使用is函数

     //->LESS代码:使用IS函数     .mixin (@a; @b: 0) when (isnumber(@b)) { ... }     .mixin (@a; @b: black) when (iscolor(@b)) { ... }      //->LESS代码:多条件，可以使用and或者逗号间隔     .mixin (@a) when (isnumber(@a)) and (@a > 0) { ...           //你可以使用关键词 and 在 guard 中加入额外的条件:     .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }     //或者，使用关键词 not 否定条件：     .mixin (@b) when not (@b > 0) { ... }

我们还可以通过与&特性结合实现'if'类型的语句

     //->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色     @my-option: true;     & when (@my-option = true) {       .box {         color: white;       }     }

四,Loops(递归/循环)

在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard条件表达式，就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS
Less:

/*生成栅格系统*/ @media screen and (max-width: 768px){   .generate-columns(12);   .generate-columns(@n, @i: 1) when (@i <= @n) {     .column-xs-@{i} {       width: (@i * 100% / @n);     }     .generate-columns(@n, (@i+1));   } } @media screen and (min-width: 768px){   .generate-columns(12);   .generate-columns(@n, @i: 1) when (@i <= @n) {     .column-sm-@{i} {       width: (@i * 100% / @n);     }     .generate-columns(@n, (@i+1));   } } 

生成CSS:

@media screen and (max-width: 768px) {   .column-xs-1 {  width: 8.33333333%;  }   .column-xs-2 {  width: 16.66666667%;  }   .column-xs-3 {  width: 25%;  }   .column-xs-4 {  width: 33.33333333%;  }   .column-xs-5 {  width: 41.66666667%;  }   .column-xs-6 {  width: 50%;  }   .column-xs-7 {  width: 58.33333333%;  }   .column-xs-8 {  width: 66.66666667%;  }   .column-xs-9 {  width: 75%;  }   .column-xs-10 {  width: 83.33333333%;  }   .column-xs-11 {  width: 91.66666667%;  }   .column-xs-12 {  width: 100%;  } } @media screen and (min-width: 768px) {   .column-sm-1 {  width: 8.33333333%;  }   .column-sm-2 {  width: 16.66666667%;  }   .column-sm-3 {  width: 25%;  }   .column-sm-4 {  width: 33.33333333%;  }   .column-sm-5 {  width: 41.66666667%;  }   .column-sm-6 {  width: 50%;  }   .column-sm-7 {  width: 58.33333333%;  }   .column-sm-8 {  width: 66.66666667%;  }   .column-sm-9 {  width: 75%;  }   .column-sm-10 {  width: 83.33333333%;  }   .column-sm-11 {  width: 91.66666667%;  }     .column-sm-12 {  width: 100%;  } }

五,Merge(兼并)

+代表以逗号分隔，+_代表多个之前以空格分隔
Less:

.mixin(){   /*内阴影*/   box-shadow+: inset 0 0 10px #555; } .scale(@num){   transform+_: scale(@num); } div{   width: 100px;   height: 100px;   background-color: #f00;   margin: 100px auto;   .mixin;   box-shadow+: 0 0 20px black;   transform+_: translateX(100px);   .scale(2); }

生成CSS:

div {   width: 100px;   height: 100px;   background-color: #f00;   margin: 100px auto;   /*内阴影*/   box-shadow: inset 0 0 10px #555, 0 0 20px black;   transform: translateX(100px) scale(2); } 

六,Parent Selectors

Less:

.box(){   border-color: #f00;    top {     /*名称写死的后代选择*/     width: 10px;   }   &:hover {     background-color: #00f;   }   &.current {     /*选择当前选择器并且class为current*/     color: red;     }   &>top{     /*名称写死的直接后代选择*/     width: 11px;   }   &-top {     /*根据选择器名称变化的直接选中*/     background-color: #fff;   }   & &-top{     /*根据选择器名称变化的后代选择*/     width: 12px;   }   &>&-top{     /*根据选择器名称变化的直接后代选择*/     width: 13px;   }   &,&-top{     /*根据选择器名称变化的并集选择*/     height: 14px;   }   &-top+&-main{     /*根据选择器名称变化的兄弟选择*/     height: 15px;   }   &+&{     /*根据选择器名称变化的兄弟选择*/     height: 16px;   } }  nav {   .box; }

生成CSS:

nav {   border-color: #f00; } nav top {   width: 10px; } nav:hover {   background-color: #00f; } nav.current {   color: red;   } nav > top {   width: 11px; } nav-top {   background-color: #fff; } nav nav-top {   width: 12px; } nav > nav-top {   width: 13px; } nav, nav-top {   height: 14px; } nav-top + nav-main {   height: 15px; } nav+nav{   height: 16px; }

改变选择器顺序，下面的案例中，选择器.no-border-radius &会前置插入它的父选择器.header .menu，最后变成.no-border-radius .header .menu形式输出：

//->LESS代码 .header {   .menu {     border-radius: 5px;     .parent & {       /*增加权重?*/       background-color: #f00;     }   } }  //->输出的CSS .header .menu {   border-radius: 5px; } .parent .header .menu {   /*增加权重?*/   background-color: #f00; } 

七,Import Directives(导入指令)

从其他样式表中导入样式。

//->LESS代码 @import "public.less";  //默认把指定文件的less也编译 @import "header.less";  //默认把指定文件的less也编译  @import (reference) "public.less";  //设置仅导入指定文件的less但不编译

除了reference以外我们还可以配置一些其他的参数值:
inline：在输出中包含源文件但不加工它
less：将文件作为Less文件对象，无论是什么文件扩展名
css：将文件作为CSS文件对象，无论是什么文件扩展名
once：只包含文件一次（默认行为） multiple：包含文件多次

八,注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */ .class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS .class { color: white }

九,内置函数

Less函数手册