笔记:less的三种使用方法
直接在浏览器端使用
第一步,引入 .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的三种使用方法的更多相关文章
- K8S(02)管理核心资源的三种基本方法
系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 管理k8s核心资源的三种基本方法: 目录 系列 ...
- javase-常用三种遍历方法
javase-常用三种遍历方法 import java.util.ArrayList; import java.util.Iterator; import java.util.List; public ...
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- Java中Map的三种遍历方法
Map的三种遍历方法: 1. 使用keySet遍历,while循环: 2. 使用entrySet遍历,while循环: 3. 使用for循环遍历. 告诉您们一个小秘密: (下↓面是测试代码,最爱看 ...
- Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
- spring与mybatis三种整合方法
spring与mybatis三种整合方法 本文主要介绍Spring与Mybatis三种常用整合方法,需要的整合架包是mybatis-spring.jar,可通过链接 http://code.googl ...
- C#使用DataSet Datatable更新数据库的三种实现方法
本文以实例形式讲述了使用DataSet Datatable更新数据库的三种实现方法,包括CommandBuilder 方法.DataAdapter 更新数据源以及使用sql语句更新.分享给大家供大家参 ...
- struts2拦截器interceptor的三种配置方法
1.struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts> <package name="struts2" extend ...
- selenium webdriver三种等待方法
webdriver三种等待方法 1.使用WebDriverWait from selenium import webdriverfrom selenium.webdriver.common.by im ...
- ASP.NET文件上传的三种基本方法
ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. <form i ...
随机推荐
- PHP基于openssl实现的非对称加密操作
使用非对称加密主要是借助openssl的公钥和私钥,用公钥加密私钥解密,或者私钥加密公钥解密. 1.安装openssl和php的openssl扩展 2.生成私钥:openssl genrsa 用于生成 ...
- springcloud:RPC和HTTP
1.RPC和HTTP 无论是微服务还是SOA,都面临着服务间的远程调用.那么服务间的远程调用方式有哪些呢? 常见的远程调用方式有以下2种: RPC:Remote Produce Call远程过程调用, ...
- ssm整合:搭建环境
解决配置中文过滤器后,存入数据库时依旧乱码问题:在web.xml中修改数据库url如下: <property name="jdbcUrl" value="jdbc: ...
- Broken Keyboard UVA 11988 数组实现链表
这个构造十分巧妙,,,又学到一招,有点类似数组实现的邻接表 #include <iostream> #include <string.h> #include <cstdi ...
- 关于dex 64K 引用限制
1.官方文档 https://developer.android.com/studio/build/multidex 主要内容: 什么是64K限制 编码时如何避免64K 限制 拆分dex避免64K 限 ...
- copyTo和clone的区别/制作mask的fillpoly函数(有问题)
OpenCV中mat::copyto( )函数使用方法 OpenCV的fillPoly函数 使用OpenCV库进行图像处理时,经常会用到clone和copyTo函数,这里对两个函数进行介绍. copy ...
- bzoj月赛1805
题目在最后,FG还不会做,等着$NicoDafaGood$和$Achen$给我讲 A 对于每一个质因子建一棵线段树,直接查询就好了 主要是看到所有数的大小都不是很大,然后质因子最多只有log个,复杂度 ...
- Linux 拷贝有更改的文件
cp -Ruv /home/username/trunk_new/app/* /data/httpdocs/wwwroot/app/
- AntColony 磁力搜索引擎的核心
介绍 AntColony(Github)是findit磁力搜索引擎的核心.用来在DHT网络中,收集活跃资源的infohash,下载并解析资源的种子文件,存入数据库等.AntColony是若干功能的合集 ...
- SOFARPC学习(一)
接触SOFARPC,是从一个好朋友(女程序媛)的推荐开始,目的是从头到尾了解这个框架,包括使用方法和源码解析. 当学习一个新东西的事物,我总喜欢先总体把握,在深入细节,这样就可以有种高屋建瓴的感觉,否 ...