less预编译语言

LESS 将 CSS 赋予了动态语言的特许，如 变量，继承，运算，函数

文档：http://www.bootcss.com/p/lesscss/

使用

/*定义变量*/
@colorA:red;
@colorB:#111;
@size:100px;
@border:1px;

/*使用变量*/
body{background:@colorA;}

/*定义函数*/
.anan(@size:100px){
    width:@size;
    height:@size;
    background: @colorA;
}

/*使用函数*/
.less-box-1{.anan;}
.less-box-2{.anan(200px)}

/*嵌套*/
#header{
    .box{width:@size;height:@size;
        .box-1{width:@size;height:50px;background: @colorA;}
        .box-2{width:@size;height:50px;background: blue;
            &:hover{background: @colorA;}
        }
    }
}

/*运算*/
#header{
    .box{width: @size*2;height:@size*2;
        .box-1{width: @size*2;background: @colorB*5;}
        .box-2{width: @size*2;border:@border*10 solid @colorA;}
    }
}

客户端编译

<link  rel="stylesheet/less" type="text/css" href="/static/admin/css/admin.less"><!-- 引入less文件 -->

<script src="/static/plug_in/less/less.min.js" type="text/javascript"></script><!-- 引入官网下载的编译文件 -->

服务端编译

npm 安装 less

npm install -g less

在终端cd进入需要编译的文件 > 指定编译文件名

lessc test.less >index.css

上一篇：html5本地存储Web Storage

下一篇：JS用for循环做九九乘法表