前端成长记之less预处理的入门使用

less是css的预处理语言，作为 CSS 的一种扩展，不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。

编译方式

1.使用koala编译

Koala 是一款由国人开发的开源预处理语言图形编译工具，目前已经支持less，sass，compass，coffeescript，很好用。下载地址 http://koala-app.com/index-zh.html

2.使用nodejs

在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装：

npm install -g less

如果你使用Mac或者Linux，可能需要使用管理员身份安装：

sudo npm install -g less

编译

lessc styles.less

常用方式介绍

1.变量

变量命名以@开头，例如

@myColor: #5B83AD;

#header { color: @myColor; }

编译为：

#header { color: #5B83AD; }

2.混合（mixin）

不带参数的方式，例如

.myColor{color: #666}

#header｛

    width:100px;

    height：100px;

    .myColor()

｝

混合也可以带参数，例如

.myColor(@color){color: @color}

#header｛

    width:100px;

    height：100px;

    .myColor(#346)

｝

混合也可以定义默认参数值，例如

如果调用不传参数的话，#666为默认值

.myColor(@color: #666){color: @color}

#header｛

    width:100px;

    height：100px;

    .myColor()

｝

3.嵌套规则

我们之前经常见到ul li的css样式

ul{list-style:none}

ul li{

    height:30px;

}

ul a｛

    color：#222；

｝

ul a:hover{

    color:#777;

}

用less嵌套的话这样写，很好理解，其中&表示上一层元素，就是a

ul{

    list-style:none;

    li{

        color：#222；

        height:30px;

    }

    a{

         color:#222;

        &：hover{

            color:#777;

        }

    }

}

4.运算

数字可以加减乘除，例如

@myFont:14px；

#d1{

    font-size：8px+@myFont

}

结果为

#d1{

    font-size：22px

}

颜色也可以运算，要先转化为10进制。

5.匹配模式

类似于js的条件运算

.test（top，@w:100px）｛

    height：@w;

｝

.test（bottom，@w:200px）｛

    height：@w;

｝

#header｛

    .test(top,120px); //匹配第一个.test

｝

6.@arguments

所有的参数

.my(@w:100px，@s：#222，@xx：solid){

    border：@arguments；

 }

#header｛.my();｝

7.避免编译

使用 ~'............'