变量

输入:

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {    color: @light-blue;}

输出:

#header {    color: #6c94be;}

变量实际上是"常量", 只能定义一次

混合(Mixins)

就是复用某个已经写好的CSS. 比如我们有如下的样式:

.bordered {    border-top: dotted 1px black;    border-bottom: solid 2px black;}

现在这段样式用在别处, 可以像下面这样写:

#menu a {    color: #111;    .bordered;}.post a {    color: red;    .bordered;}

现在.bordered将同时应用在#menu a和.post a中. 当然如果换成#id定义的形式,

也是适用的.

嵌套

我们正常写HTML结构的经常是嵌套关系, 但我们写原生CSS则必须挨个定义. less提供嵌套定义

CSS的功能.

输入:

#header {    color: black;}#header .navigation {    font-size: 12px;}#header .logo {    width: 300px;}

输出:

#header {    color: black;    .navigation {        font-size: 12px;    }    .logo {        width: 300px;    }}

现在我们把一个经典的清除浮动的方法clearfix, 改写成嵌套的形式:

.clearfix {    display: block;    zoom: 1;    &:after {        content: " ";        display: block;        font-size: 0;        height: 0;        clear: both;        visibility: hidden;    }}

&代表当前选择器的父选择器.

运算

数字, 颜色, 变量可以进行基本的数学运算(+ - * /).

// numbers are converted into the same units@conversion-1: 5cm + 10mm;// 10mm 转换成 1cm// result is 6cm@conversion-2: 2 - 3cm - 5mm; // 2 转行 2cm, 5mm 转换成 0.5cm// result is -1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // 单位都被去掉 2 + 5 - 3 = 4// result is 4px// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%@color: #224488 / 2; //results in #112244background-color: #112244 + #111; // result is #223355// #111 相当于 #111111

命名空间和访问器

类似于混合的用法, 假如我们有这样一个样式:

#bundle {    .button {        display: block;        border: 1px solid black;        background-color: grey;        &:hover {            background-color: white        }    }    .tab { ... }    .citation { ... }}

如果我们想在#header a中复用.button, 我们可以这样:

#header a {    color: orange;    #bundle > .button;}

作用域

在less里定义的变量, 默认先在本地环境中找, 找不到就在其父环境中找, 依次类推.

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

变量没有先后顺序之分, 下面的样式和上面的等价.

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

注释

单行和多行注释, 都可以使用.

/* One hell of a blockstyle comment! */@var: red;// Get in line!@var: white;

导入

导入的运行方式和预期的一样.

@import "library"; // library.less// 对于 .less 文件, 后缀名可省略@import "typo.css";

相关链接

less cdn

https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.js

https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js

https://cdnjs.com/libraries/less.js

less official site

http://lesscss.org/

cdn site

https://cdnjs.com/

less 中文网

http://www.lesscss.net/