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

深入学习, 毫无疑问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. 常用的几个linux命令

    linux 命令众多,特别是每个命令后面的option更是很多,如果不经常使用,就容易忘记.下面是一些常用的命令和参数.其他不常用的,可以用help去现查现用. 1. 最常用的命令列表 下面列出几个在 ...

  2. ubuntu qt5 error: Unknown module(s) in QT: webkitwidgets解决办法

    question: project-error-unknown-modules-in-qt-webkitwidgets-webkit os: ubuntu16.04 LTS-32bit qmake v ...

  3. CRM认识的误区

    众所周知,CRM,就是平时说的“客户关系管理”,指用CRM来管理 企业与客户之间的关系.纵观整个IT圈子,做CRM的厂商比比皆是,每个厂商都有自己的产品宣言,令人眼花缭乱.但是领很多老板们不解的是,我 ...

  4. 真正解决 Android Studio无法启动，gradle下载不了 提示“building “ 项目名”gradle project info”(原创20131216)

    最近开始研究Android Studio 开发,但是在开始的时候,一直下载gradle,弄了四天,都没有成功,什么FQ,什么设置gradle路径,都没有解决,但是有一次在公司的电脑上很成功的更新了,完 ...

  5. hdu3613 Best Reward 扩展kmp or O(n)求最大回文子串

    /** 题目:hdu3613 Best Reward 链接:http://acm.hdu.edu.cn/showproblem.php?pid=3613 题意:有一个字符串,把他切成两部分. 如果这部 ...

  6. oracle的dual表

    1.DUAL表的用途Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中 --查看当前连接用户Connected to Oracle Databas ...

  7. 日期类Date

    Java在日期类中封装了有关日期和时间的信息,用户可以通过调用相应的方法来获取系统时间或设置日期和时间.Date类中有很多方法在JDK1.0公布后已经过时了,在8.3中我们将介绍JDK1.0中新加的用 ...

  8. 组件(Conponent)是图形用户界面最基本的部分

    组件(Conponent)是图形用户界面最基本的部分,也称为构件 ,是可以以图形化的方式显示在屏幕上,并能与用户进行交互的对象,例如一个按钮,一个标签等. 组件不能独立地显示出来,必须将其放在一定的容 ...

  9. Django model ：add a non-nullable field 'SKU' to product without a default; we can't do that

    You are trying to add a non-nullable field 'SKU' to product without a default; we can't do that (the ...

  10. css各居中大法

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...