直接在浏览器端使用


第一步,引入 .less 文件(注意要将 rel 属性设置为“stylesheet/less”)

<link rel="stylesheet/less" type="text/css" href="styles.less" />

第二步,引入Less.js文件

<script src="less.js" type="text/javascript"></script>

(这里的js文件可以去官网下载

需要特别注意的是:

1).less 样式文件一定要在 Less.js之前引入,这样才能保证 .less 文件被正确编译。

2)由于浏览器端使用Less时,是使用 ajax 来拉取 .less 文件,如果直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下,会拉取不到 .less 文件,导致样式无法生效。因此,必须在http(s)协议下使用,即必须在服务器环境下使用。

3)还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取 .less文件。解决方案是,在服务器中为 .less 文件配置MIME值为 text/css。一种更简单的方法,就是直接将 .less 文件改名为 .css 文件即可。

在开发阶段,在页面中嵌入一个 Less.js 将Less在线编译成CSS样式,确实很方便。但是,在线编译会产生加载延迟,即便在浏览器中有不足一秒的加载延迟,也会降低性能。如果Javascrip执行错误,还会引起美观问题。因此,在生产环境中,并不推荐这种方式,而是推荐在服务器端使用Less


我在直接使用浏览器引用的时候,出现了第二种情况的错误,一直没找到解决方案。

再考虑到实际运用性,故采用在服务器端使用的方式。

在服务器端Node.JS中使用


 1. 安装Less编译器

为了方便使用 Lessc 这个全局命令,建议采用全局安装。安装命令如下:

$ npm install Less -g

如果想安装指定版本,也非常方便,只需在安装包后添加 @VERSION即可。如,安装1.6.2版本的命令如下:

$ npm install Less@1.6. -g

当然,如果你想安装最新版本,可以尝试以下命令:

$ npm install Less@latest -g

2. 编译less文件并输出标准格式的css文件

$ lessc styles.less styles.css

注:要输出最小化的CSS可以使用clean-css插件。当插件安装时,用-clean css选项指定一个缩小的css输出:

$ lessc --clean-css styles.less styles.min.css

代码中用法


只要安装了 Less,就可以在Node中像这样调用编译器:

var Less = require('Less');
Less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});

经过编译生成的 CSS 代码为:

.class {
width: 2;
}

你也可以手动调用解析器和编译器:

var parser = new(Less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});

笔记:less的三种使用方法的更多相关文章

  1. K8S(02)管理核心资源的三种基本方法

    系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 管理k8s核心资源的三种基本方法: 目录 系列 ...

  2. javase-常用三种遍历方法

    javase-常用三种遍历方法 import java.util.ArrayList; import java.util.Iterator; import java.util.List; public ...

  3. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. Java中Map的三种遍历方法

    Map的三种遍历方法: 1. 使用keySet遍历,while循环: 2. 使用entrySet遍历,while循环: 3. 使用for循环遍历.   告诉您们一个小秘密: (下↓面是测试代码,最爱看 ...

  5. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  6. spring与mybatis三种整合方法

    spring与mybatis三种整合方法 本文主要介绍Spring与Mybatis三种常用整合方法,需要的整合架包是mybatis-spring.jar,可通过链接 http://code.googl ...

  7. C#使用DataSet Datatable更新数据库的三种实现方法

    本文以实例形式讲述了使用DataSet Datatable更新数据库的三种实现方法,包括CommandBuilder 方法.DataAdapter 更新数据源以及使用sql语句更新.分享给大家供大家参 ...

  8. struts2拦截器interceptor的三种配置方法

    1.struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts> <package name="struts2" extend ...

  9. selenium webdriver三种等待方法

    webdriver三种等待方法 1.使用WebDriverWait from selenium import webdriverfrom selenium.webdriver.common.by im ...

  10. ASP.NET文件上传的三种基本方法

    ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. <form i ...

随机推荐

  1. springboot拦截器之验证登录

    添加jar包,这个jar包不是必须的,只是在拦截器里用到了,如果不用的话,完全可以不引入 <dependency> <groupId>org.apache.commons< ...

  2. Hadoop集群中有哪些节点类型

  3. Leetcode443.String Compression压缩字符串

    给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长度. 进阶: ...

  4. 微信Web开发者工具报错:net::ERR_BLOCKED_BY_CLIENT

    今天在微信调试琳德的拼团,用了挺久之后,输入什么测试地址:发现页面空白,console提示身份验证网址错误,错误类型为:net::ERR_BLOCKED_BY_CLIENT, 尝试了好多次.以为是我的 ...

  5. 手机前端开发调试利器-vConsole

    最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...

  6. Python发送QQ消息

    一.需求背景 每天早上取一批数据,数据文件经过压缩加密之后用邮箱发送,而解压密码通过QQ发送给运营.使用Python进行取数.文件加密在已经实现的情况下,需要实现通过QQ发送密码的功能.     在进 ...

  7. python基础--常用的模块(collections、time、datetime、random、os、sys、json、pickle)

    collection模块: namedtuple:它是一个函数,是用来创建一个自定义的tuple对象的,并且规定了tuple元素的个数,并可以用属性而不是索引来引用tuple的某个元素.所以我们就可以 ...

  8. IbatchBolt和BaseTransactionalBolt区别

    void prepare(java.util.Map conf, TopologyContext context, BatchOutputCollector collector, T id) T id ...

  9. 【风马一族_win10设置热点】win10无法开启热点怎么办

    输入cmd,设置管理员开启 输入netsh wlan set hostednetwork mode=allow ssid=name(无线名字) key=00000000(8位以上密码); 输入nets ...

  10. VMware ESXi 6.7服务器设置开机自动启动虚拟机

    VMware ESXi 6.7服务器设置开机自动启动虚拟机,具体操作步骤如下 1.登陆到VMware ESXi 6.7  web 界面 2.导航器-->主机-->管理  将自动启动修改为 ...