在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在

深入学习, 毫无疑问hello-world一直是那么简单.

准备环境

  1. 较新版的高级浏览器.
  2. WAMP环境.
  3. 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的内容有几点需要说明:

  1. link的rel值是stylesheet/less
  2. 在第一次出现的script标签里面, 写的代码是less的配置文件,

    env: "development"代表启用开发模式, 这段不是必须的可省略. 跟多关于浏览器端配置

    的说明可以参考官方的Browser Options
  3. 上述文件的引入顺序, 不能换, 必须是link, 配置文件, less.js这个顺序.
  4. 当然除了CDN在线引用, less.js 也可以下载到本地使用.

效果

在浏览器中输入http://localhost/res/less_demo/hello-world.html运行.

如果文件结构和我的不同, 可自行修改.

如果我们没有,正确在本地服务器端运行. 由于浏览器禁止操作本地文件, 将出现

CORS错误. 提示错误图如下:

如果一切OK, 则运行正确, 效果图如下:

可以看到, 控制台输出一些调试信息. 该信息只有在配置成开发模式才会出现.

相关链接

less cdn

https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.js

https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js

https://cdnjs.com/libraries/less.js

less official site

http://lesscss.org/

less 中文网

http://www.lesscss.net/

less本地环境输出hello-world的更多相关文章

  1. Maven-001-初识及本地环境配置

    前段时间想对自己之前写的一些代码或者小工具,因为写的比较乱,因而想系统的管理一下自己学习 Java 时写的源码,经过多方请教.网上查询,最终决定使用 Maven 来管理自己写的代码. Maven 是一 ...

  2. spring boot / cloud (十八) 使用docker快速搭建本地环境

    spring boot / cloud (十八) 使用docker快速搭建本地环境 在平时的开发中工作中,环境的搭建其实一直都是一个很麻烦的事情 特别是现在,系统越来越复杂,所需要连接的一些中间件也越 ...

  3. Swagger本地环境配置

    一.技术背景 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远.而前后端的唯一联系便是 API 接口,与此同 ...

  4. setlocale(LC_ALL, ""); 取值为空字符串" "(注意,不是NULL),则locale与本地环境所使用的编码方式相同(在本地化时,应该很有用);

    在C运行库提供的多字节字符-宽字符转换函数:mbstowcs()/wcstombs()中,需要用到全局变量locale( locale encoding ),以指定多字节字符的编码类型 1. 功能: ...

  5. 使用docker快速搭建本地环境

    在平时的开发中工作中,环境的搭建其实一直都是一个很麻烦的事情 特别是现在,系统越来越复杂,所需要连接的一些中间件也越来越多. 然而要顺利的安装好这些中间件也是一个比较费时费力的工作. 俗话说" ...

  6. hadoop 2.7.3本地环境运行官方wordcount-基于HDFS

    接上篇<hadoop 2.7.3本地环境运行官方wordcount>.继续在本地模式下测试,本次使用hdfs. 2 本地模式使用fs计数wodcount 上面是直接使用的是linux的文件 ...

  7. hadoop 2.7.3本地环境运行官方wordcount

    hadoop 2.7.3本地环境运行官方wordcount 基本环境: 系统:win7 虚机环境:virtualBox 虚机:centos 7 hadoop版本:2.7.3 本次先以独立模式(本地模式 ...

  8. 在 SharePoint Server 2016 本地环境中设置 OneDrive for Business

    建议补丁 建议在sharepoint2016打上KB3127940补丁,补丁下载地址 https://support.microsoft.com/zh-cn/kb/3127940 当然不打,也可以用O ...

  9. 关于firefox对font awesome本地环境无法加载问题

    问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...

随机推荐

  1. Jquery学习笔记(2)--五角星评分

    网购五星评分模拟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. (译)Getting Started——1.2.2 Desinging a User Interface(设计用户界面)

    ​      用户需要以最简单的方式与应用界面进行交互.应该从用户的角度出发设计页面,使得界面更高效.简捷和直接. storyboard以图形化的方式帮助你设计和实现界面.在设计和实现界面的过程中,你 ...

  3. java删除递归文件夹及文件夹下文件

    public static void delUrlLocalFile(String urlPath) { File file = new File(urlPath); if(file.isDirect ...

  4. Visual Studio中“后期生成事件命令行” 中使用XCopy命令

    将程序所依赖的动态库与其他依赖文件做了分类,使用XCopy命令自动生成相应的目录结构. set source="$(TargetDir)" set output="$(S ...

  5. FXGameEngine

    最初是在 http://jayskills.com/ 这个网站发现的,但一直未找到源码,今天偶然发现其源码位于 https://github.com/eppleton/FXGameEngine 下载, ...

  6. Windows 动态库创建和使用 part 2

    一.Windows动态库的创建: 1.先选择 "DLL" 和 “控项目” 2.添加一个头文件,一个源文件  CppDll.h,CppDll.cpp,一个模块定义文件 CppDll. ...

  7. button按钮可点和不可点:

    button按钮可点和不可点: document.getElementById("check").disabled=true; document.getElementById(&q ...

  8. html 调用ActiveX

    html网页调用ActiveX控件时,要获取到ActiveX的ClassID,这个ClassID是注册到系统里的,而不是工程中的uuid,(下图为uuid). 正确的是在注册表的HKEY_CLASSE ...

  9. c# 将html添加进剪贴板(带格式)

    调用: ClipboardHelper.CopyToClipboard("<h1>hello world</h1>", ""); /// ...

  10. jQuery特效:图片的轮播

    Flexslider图片轮播.文字图片相结合滑动切换效果 地址:http://www.helloweba.com/view-blog-265.html 示例:http://www.helloweba. ...