1、Less-初见

简单的入门测试

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/less">
            　　*{
                margin: 0;
                padding: 0;
            }
            #warp{
                position: relative;
                width: 300px;
                height: 400px;
                border: 1px solid;
                margin: 0 auto;
                .inner{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    height: 100px;
                    width: 100px;
                    background: pink;
                }
            }
        </style>
    </head>
    <body>
        <div id="warp">
            <div class="inner">
            </div>
        </div>
        
    </body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
</html>

如何在线上编译

使用考拉编译

官网： http://koala-app.com/

线上编译可能需要很长的时间，严重影响体验

此时运行是无法得到结果的

将css文件夹拖到Koala中并进行刷新，此时会生成koala.css文件

再次运行查看效果：

简单的入门测试

使用考拉编译

猜你喜欢