less入门

变量

输入:

@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 #112244
background-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 block
style 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/