图片取自网络

less是什么

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

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

使用less

Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考 多种用法

这里推荐使用的是一款国产的开源预处理语言图形编译工具Koala, 因为是有中文版而且使用起来简单,Koala是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。

在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。

其他配置使用注意事项等等,去Koala官网查看相关文档, 都有很详细说明, 这里主要记录学习less的语法.

声明文档格式

编写less时, 首先要在在less文件顶部声明文档格式

@charset "utf8";

注释

/* 我是注释 */ 在less文件和css文件中都会显示
// 我是注释 不会在css文件中显示, 在less中显示

变量

less中声明变量必须使用@开头, 例如@变量名: 值;

//less文件
@test_width:300px;
.box {
    width:@test_width;
    }

编译成css文件之后 :

//css文件
.box {
    width: 300px;

混合

我理解为把之前声明过的样式当做变量使用, 可提高代码复用, 提升效率.

//less文件
.box1 {
    width:300px;
    height:300px;
    background:#0f0;
    }
    
.box2 {
    .box;  //代替了类名为box1的全部样式声明
    margin: 10px;
    }

编译成css文件之后 :

//css文件
.box1 {
    width:300px;
    height:300px;
    background:#0f0;
    }
    
.box2 {
    width:300px;
    height:300px;
    background:#0f0;
    margin: 10px;
    }

默认带值:

//less文件
.border(@border_width:10px) { //如声明了10px, 那么没传参数的话默认显示就是10px
    border: solid pink @border_width;
    }
.box1 {
    .border(); //没有传参数
    .border(30px); //传入了参数

编译成css文件之后:

//css文件
.box1 {
    border: solid pink 10px; //显示默认值
    border: solid pink 30px; //显示传入参数的值
    }

举个减少代码量的栗子,一些css3属性要做兼容, 用的多的样式用混合之后就轻松了.

//less文件
.border_radius(@radius:5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }
    
.box1 {
    .border_radius();

编译成css文件之后:

.box1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

其他地方要用到不同的圆角弧度, 只需在.border_radius();中传入需要的值就OK

匹配模式

在使用的时候传入事先定义好声明的值就可以了, 举个栗子, 遇到用css写三角形的情况, 用匹配模式-匹配三角形, 只需传入方向和宽度.

//less文件
    //声明上右下左四个方向的三角
.triangle(top,@w:5px,@c#ccc) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
    }
.triangle(right,@w:5px,@c#ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed solid dashed;
    }
.triangle(left,@w:5px,@c#ccc) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
    }

.triangle(bottom,@w:5px,@c#ccc) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    }
//无论选择上面哪一个, 始终会把下面这个表达式里的声明带上  
.triangle(@_.@w:5px.@c:#ccc){
    width:0;
    height:0;
    overflow:hidden;    

.sanjiao {
    .triangle(bottom, 100px); //匹配传入的参数, 不传参数会显示默认的
    }

编译成css文件之后:

//css文件
.sanjiao {
    border-width:100px;
    border-color: #cccccc transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    width:0;
    height:0;
    overflow: hidden;
    }

匹配模式-定位

一个使用匹配模式, 匹配定位的例子.

//less文件
.pos(r) {
    position: relative;
    }
.pos(a) {
    position: absolute;
    }
.pos(f) {
    position: fixed;
    }
    
.box1 {
    width:300px;
    height:300px;
    background-color: #ccc;
    .pos(r); //传入需要匹配的参数
    }

编译成css文件之后:

.box1 {
    width:300px;
    height:300px;
    background-color: #ccc;
    position: relative;
    }

运算

在less中的运算, 任何数字, 颜色,或者变量都可以参与运算+ - * /, 运算应该包裹在括号中.

//less文件
@test_width:300px;
.box {
    width: (@test_width - 20)*5; //先减后乘
    color: #ccc - 10; //用得少
    }

编译成css文件之后:

.box {
    width: 1400px; //运算后的结果
    color: c2c2c2; //颜色会变淡
    }

嵌套规则

和写HTML代码类似, 直接上代码:

//html文件
<ul class='list'>
    <li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
    <li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
    <li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
    <li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
    <li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
</ul>

//less文件
.list {
    width:600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    
    li {
        height: 30px;
        line-height: 30px;
        background_color: #ccc;
        margin-bottom: 5px;
    }
    a {
        float: left;
        &:hover { //&代表的是父元素
            color: red;
            }
    }
    span {
        float: right;
    }
    }
    

注意其中&代表的是父元素,编译成css文件之后:

.list {
    width:600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    }
.list li {
        height: 30px;
        line-height: 30px;
        background_color: #ccc;
        margin-bottom: 5px;
        }
.list a {
        float: left;
        }
.list span {
        float: right;
        }

@arguments

类似于形参, 代替多个值, 编译后的值为传入的实参, 如没有传参,则编译为默认值.

//less文件
.border(@w:30px,@c: yellow,@xx:solid) {
    border: @arguments; //可代替上面括号内三个参数

.box {
    .border(70,red,dashed); //传入你需要的参数用逗号分隔, 不传表示默认
    }

编译成css文件之后:

//css文件
.box {
    border: 70px #ff0000 dashed;
    

避免编译

有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法, 要输出这样的值用''/""包裹, 然后再前面加上~
例如width:~'calc(300px - 30px)';

//less文件
.box {
    width: calc(300px - 30px);
    }

编译成css文件之后:

//css文件
.box {
    width: calc(300px - 30px);
    }

这样不需要编译的时候, 也可以很好的解决.

!important

作用是增加优先级, 一般不用, 影响性能.

//less文件
.border_radius(@radius:5px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }
    
.box1 {
    .border_radius() !important; //添加了!important

编译成css文件之后:

.box1 {
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;