js学习总结----less基础和编译

对于一些less的一些基本概念这里不在赘余，就来说说怎么使用吧

1、首先从官网下载less的js文件，例如less.min.js

2、编写less代码，示例代码如下

@color:#eee;
@white-color:#fff;
.transform-scale(@val:1){
    -webkit-transform:scale(@val);
    -moz-transform:scale(@val);
    -ms-transform:scale(@val);
    -o-transform:scale(@val);
    transform:scale(@val);
}
.transition(@property:all,@duration:1s,@time-function:linear,@delay:1s){
    -webkit-transition:@arguments;
    -moz-transition:@arguments;
    -ms-transition:@arguments;
    -0-transition:@arguments;
    transition:@arguments;
}
html,body{
    width:100%;
    height:100%;
    background:@white-color;
}
.box{
    color:@color;
    width:200px;
    height:200px;
    border:1px solid @color;
    background:#dedede;
    .transition(@duration:.3s);
    &:hover{
        .transform-scale(@val:1.5);
    }
}

3、在页面中引入css和js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet/less" href="index.less" charset='utf-8'>
</head>
<body>
    <div class='box'></div>
    <script>
        //对less进行一些简单的配置，保证在1s的时间自动更新
        var less = {
            env:'development',
            poll:1000
        }
    </script>
    <script charset='utf-8' src='less.min.js'></script>
    <script>
        less.watch();//配置less监听
    </script>
</body>
</html>

通过以上的方式就可以在页面中看到效果了。但是在项目要上线的时候，这样编译会造成卡顿，可以通过node来把less文件编译成css文件然后重新引入。

安装less模块

npm install less -g

编译less文件为css文件

lessc index.less index.css

这样文件中就会生成一个index.css文件，直接引入即可。

posted @ 2017-08-08 15:13  diasa  阅读(1238)  评论(0)  编辑  收藏  举报