less入门

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。
Less包含了一套自定义的语法及一个解析器，用户可以通过这些语法来编写less文件，然后调用解析器来生成相应的css文件。简单来说，less其实就是在现有css语法的基础上为它加入了程序式语言的特性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

官网
中文网址

一、安装

1、命令行下使用

Less可以通过npm在命令行上使用，作为一个脚本文件浏览器或用于广泛的第三方工具下载。

因为我的电脑已经安装了node环境，所以可以直接通过npm包安装的方式来安装less。

1
npm install -g less

完成安装之后，便可以通过lessc命令来编译less文件了。如下例：

1
2
3
4
5
@color: #ccc;
body {
    color: @color;
}

编译该文件：

1
lessc test.less > test.css

便可以得到test.css文件如下：

1
2
3
body {
  color: #ccc;
}

当然lessc后也可以跟很多的参数，如：

1
2
//-x表示压缩
lessc -x test.less > test.css

更多命令可以参考 —help或者参考官网

2、客户端使用

在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。

下面看如果直接在客户端来使用

1
2
3
4
<!-- 目标样式表 -->
<link rel="stylesheet/less" type="text/css" href="test.less" />
<!-- less文件 -->
<script src="less.min.js" type="text/javascript"></script>

这样当在浏览器中访问该页面时，less.min.js便会编译test.less并在页面head中插入相应编译后的css样式

有两点需要特别注意:

  • 确保包涵.less样式表在less.js脚本之前
  • 当你引入多个.less样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

3、在引入了GruntJs的项目中使用

参见grunt-contrib-less

二、语法

1、变量

less允许开发者自定义变量，这样做有什么好处呢？如下例：

less:

1
2
3
4
5
6
7
8
9
10
11
@artical-color: #fff;
@title-color: #ccc;
.con {
    .con-title {
        color: @title-color;
    }
    .con-artical {
        color: @artical-color;
    }
}

css：

1
2
3
4
5
6
.con .con-title {
    color: #ccc;
}
.con .con-artical {
    color: #fff;
}

不难看到，通过这种方式，可以方便对变量进行统一的管理，可以抽取公共的属性在全局进行定义，一旦涉及到修改，只需修改变量即可。此外，也可以利用这种特性，来定义主题。

在编程中既然有变量，那么就必定涉及到一个概念作用域。下面来看下在less中变量的作用域是怎样的。

less:

1
2
3
4
5
6
7
8
@color: #fff;
.con {
    color: @color;
    @color: #000;
    .con-title {
        background-color: @color;
    }
}

css:

1
2
3
4
5
6
.con {
    color: #fff;
}
.con .con-title {
    background-color: #000;
}

2、mixins

在less中，mixins指在一个class中混入另一个已经定义的class。

less:

1
2
3
4
5
6
7
8
9
//定义一个样式
.btn {
    background-color: #b72b25;
    color: #fff;
}
//在其他的选择器中使用
.con-btns {
    .btn;
}

css:

1
2
3
4
.con-btns {
    background-color: #b72b25;
    color: #fff;
}

mixins其实就是一种规则的复用。除此之外，mixins还允许混入参数。

less:

1
2
3
4
5
6
7
8
9
10
11
//定义一个样式
.btn(@color) {
    background-color: @color;
}
//在其他的选择器中使用
.con-enable=btn {
    .btn(#b72b25);
}
.con-disable=btn {
    .btn(#ddd);
}

css:

1
2
3
4
5
6
.con-enable-btn {
    background-color: #b72b25;
}
.con-disable-btn {
    background-color: #ddd;
}

mixins还支持传入默认参数，如下：

less:

1
2
3
4
5
6
.border(@w:1px,@t:solid,@c:#ccc) {
    border: @arguments;
}
.detail-info {
    .border(2px,dashed,#d8d8d8);
}

css:

1
2
3
.detail-info {
     border: 2px dashed #d8d8d8;
 }

在项目中为了防止选择器重名的问题，可以利用命名空间：

1
2
3
4
5
6
#amo {
    .head {}
}
.page-head {
    #amo > .head;
}

3、嵌套

嵌套规则很简单，如html本身的dom层次。

1
2
3
4
<div class="con">
    <div class="con-title"></div>
    <div class="con-artical"><a href="javascript:void(0)"></a></div>
</div>

那么less可以这样编写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.con {
    ...
    .con-title {
        ...
    }
    .con-artical {
        ...
        a {
            ...
            &:hover { //&表示该元素如果没有&表示后代元素
                ...
            }
        }
    }
}

4、运算和函数

以按钮的hover为例：

less:

1
2
3
4
5
6
7
8
9
10
11
12
@color: #80e619;
.btn(@color) {
    background-color: @color;
}
.enable-btn {
    .btn(@color);
    &:hover { 
        .btn(darken(@color, 20%));
    }
}

css:

1
2
3
4
5
6
.enable-btn {
    background-color: #80e619;
}
.enable-btn:hover {
    background-color: #4d8a0f;
}

这样很简单的就实现了鼠标hover到按钮上背景色变暗的效果。

更多功能可以参考function api

4、注释

可采用//注释或者/注释/，但是在编译生成css若想保留注释必须采用css标准注释/../。

5、css3参考用例

  • 圆角
1
2
3
4
5
6
7
8
9
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
.test-div {
    .border-radius(20px);
}
  • 四个角可自由定制角度
1
2
3
4
5
6
7
8
9
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}
.test-div {
    .border-radius-custom(20px, 20px, 0px, 0px);
}
  • 阴影
1
2
3
4
5
6
7
8
9
    .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.test-div {
    .box-shadow(5px, 5px, 6px, 0.3);
}
  • 元素过渡效果
1
2
3
4
5
6
7
8
9
10
11
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
.test-div {
    .transition(all, 0.5s, ease-in);
}
  • 旋转
1
2
3
4
5
6
7
8
9
10
11
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
.test-div {
    .transform(5deg, 0.5, 1deg, 0px);
}
  • 颜色渐变
1
2
3
4
5
6
7
8
9
10
11
12
13
/*线性渐变*/
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
.test-div {
    .gradient(left, #663333, #333333);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
/*快速渐变*/
.quick-gradient (@origin: left, @alpha: 0.2) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
.test-div {
    background-color: #bada55;
    .quick-gradient(top, 0.2);
}
  • 镜像
1
2
3
4
5
6
7
8
.reflect (@length: 50%, @opacity: 0.2){
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent),
    color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}
.test-div {
    .reflect(20%, 0.2);
}
  • 颜色
1
2
3
4
5
6
7
8
9
10
11
12
/*互补色*/
@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
.one {color: @base;}
.two {color: @complement1;}
.three {color: @complement2;}
.four {color: @lighten1;}
.five {color: @lighten2;}
1
2
3
4
5
6
7
8
9
10
11
12
/*颜色微调*/
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
.one {color: @base;}
.two {color: @lighter1;}
.three {color: @lighter2;}
.four {color: @darker1;}
.five {color: @darker2;}

也可以参考
css3预处理工具
useful mixins