less本地环境输出hello-world

最新推荐文章于 2024-07-04 09:24:51 发布

凯尔kyle

最新推荐文章于 2024-07-04 09:24:51 发布

阅读量64

点赞数

分类专栏： WEB 文章标签： java js

本文链接：https://blog.csdn.net/xys2015/article/details/109340158

版权

WEB 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在
深入学习, 毫无疑问hello-world一直是那么简单.

准备环境

较新版的高级浏览器.
WAMP环境.
less.js文件

本人的环境:
Google Chrome 60.0
WampServer 3.0.6
less 2.7.2

WampServer是一个PHP集成开发环境, 我们用来它来模拟本地服务器环境, 也可以换成
其它类似的本地服务器环境. 即便是前端开发没本地服务器环境也是不行的, 比如cookie,
ajax这些都是在服务器环境中才能运行, 而less由于CORS同源策略的问题也需要在本地
服务器环境中运行.

hello-world

首先在wamp的 www目录下创建如下文件夹结构.

less_demo
    hello.less
    hello-world.html

hello.less文件内容如下:

@red: red;

#hello {
  color: @red;
}

hello-world.html文件内容如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>less hello-world</title>
    <link rel="stylesheet/less" href="hello.less">
    <script>
        less = {
            env: "development"
        };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</head>
<body>

<div id="hello">hello-world</div>

</body>
</html>

hello-world.html的内容有几点需要说明:

link的rel值是stylesheet/less
在第一次出现的script标签里面, 写的代码是less的配置文件,env: "development"代表启用开发模式, 这段不是必须的可省略. 跟多关于浏览器端配置
的说明可以参考官方的Browser Options
上述文件的引入顺序, 不能换, 必须是link, 配置文件, less.js这个顺序.
当然除了CDN在线引用, less.js 也可以下载到本地使用.