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

深入学习, 毫无疑问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. Oracle 错误 maximum number of processes(150) exceeded 解决办法

    网上很多同行应该都遇到过这个问题,百度一搜 千篇一律的处理办法,就是加大进程数. 但是我这边情况不一样,因为我的Oracle 11g是早上刚装的,跟本没人用,我用PLSQL链接照样说不能链接. 我就在 ...

  2. 字符串的数字部分递增，如user00000001后面的数字部分递增+1

    使用存储过程方式 bengin declare@namevarchar(50) set@name=(selectmax(right('user00000001',8<8是从后往前数,从1开始&g ...

  3. 【PM面试题】请设计一个老年人用的新闻App

    考虑用户需求及痛点 老年人由于特殊的生理特点,需要考虑其阅读的痛点,加入例如文字大小自定义,朗读新闻,放大镜功能.同时在软件设计上减少文字的量,多放入一些多媒体的内容. 老年人会对过去发生的一些事情产 ...

  4. 深入了解Go Playground

    简介 2010年9月,我们介绍了Go Playground,这是一个完全由Go代码组成和返回程序运行结果的web服务器. 如果你是一位Go程序员,那你很可能已经通过阅读Go教程或执行Go文档中的示例程 ...

  5. python - 判断是否为正小数和正整数

    判断输入的金额是否为正整数和正小数 def check_float(string): #支付时,输入的金额可能是小数,也可能是整数 s = str(string) if s.count('.') == ...

  6. 左萧龙（LZ）个人博客

    网址(blog):http://www.cnblogs.com/zuoxiaolong/ 网站:http://www.zuoxiaolong.com/

  7. 对Linux命令进一步学习vim(二）

    今天,进一步学习Linux相关的命令,可能会有重复的地方,但学习本来就是不断重复的过程.故作小记! 1.安装了:vim  ,,,一款Linux爱好者经常用到的ide sudo apt-get inst ...

  8. tinypng的python批量压缩图片功能

    tinypng网站提供的图片压缩功能很不错,但是直接在网站上压缩有限制,大量压缩图片时比较麻烦,还好官方提供了很多脚本的自动化压缩接口.下面简单说下python批量压缩步骤. 1.申请api key ...

  9. 我的JavaScript笔记--数据类型，预编译，闭包

     在我们js中存储数据的空间可以分为两种,堆内存和栈内存 堆内存:我们定义的那些引用数据类型的数据都会在堆内存中开辟空间. 栈内存:我们运行的js代码还有我们定义的基本数据类型,都直接在栈内存中存储 ...

  10. 基于Web和二维码的文件传输服务

    在工作中难免需要对外提供一些我们抓取的log或者操作视频之类的资料,但由于工作环境日渐规范和严格,公司的网络环境和客户的网络环境是被独立开来的.这样做的好处不必多说,但同时也给我们工作带来的诸多不便. ...