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.避免编译

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