笔记: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.2 -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()); });
转载于:https://www.cnblogs.com/amcy/p/9784705.html
笔记:less的三种使用方法相关推荐
- php怎么四舍五入,php 四舍五入的三种实现方法
这篇文章主要为大家详细介绍了php 四舍五入的三种实现方法,具有一定的参考价值,可以用来参考一下. 对php 四舍五入的三种方法感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! php 四 ...
- iphone已停用解锁大概多少钱_iPhone停用怎么解锁 三种处理方法详解
[巴士数码]一些用户遇到了iPhone被停用的情况,不知道怎么解锁的具体操作方法,现在和大家分享三种iPhone停用怎么解锁的处理方法.如果你的iPhone或者iPad被停用了可以试试以下三种方法进行 ...
- R实战| PCA、tSNE、UMAP三种降维方法在R中的实现
降维 在组学分析中,一般通过降维算法得到低纬度如二维或三维的新坐标数据,再结合可视化技术去展示样本的在新坐标的空间分布,接着加上统计检验结果证实整体组学水平上组间的差异性.降维算法有基于线性模型的PC ...
- PHP开发之递归算法的三种实现方法
递归算法对于任何一个编程人员来说,应该都不陌生.因为递归这个概念,无论是在PHP语言还是Java等其他编程语言中,都是大多数算法的灵魂.对于PHP新手来说,递归算法的实现原理可能不容易理解.但是只要你 ...
- 黑马程序员_Java解析网络数据流的三种特殊方法
Java解析网络数据流的三种特殊方法 Java作为最开放的语言,已越来越受到网络程序员的青睐.但这一青睐族有着同样的经历--曾经都为网络上通信的Java数据格式而烦恼. 笔者也不例外,曾经为此而查阅了 ...
- Oracle的join默认为,Oracle中的三种Join方法详解
这里将为大家介绍Oracle中的三种Join方法,Nested loop join.Sort merge join和Hash join.整理出来以便帮助大家学习. 基本概念 Nested loop j ...
- python中保留小数_python保留小数位的三种实现方法
前言 保留小数位是我们经常会碰到的问题,尤其是刷题过程中.那么在python中保留小数位的方法也非常多,但是笔者的原则就是什么简单用什么,因此这里介绍几种比较简单实用的保留小数位的方法: 方法一:fo ...
- oracle hash join outer,CSS_浅谈Oracle中的三种Join方法,基本概念
Nested loop join:
Outer - phpStudy...
浅谈Oracle中的三种Join方法 基本概念 Nested loop join: Outer table中的每一行与inner table中的相应记录join,类似一个嵌套的循环. Sort mer ...
- lopa分析_【风险分析方法】HAZOP、LOPA和FMEA三种分析方法,如何做到信息共享?...
导 读 信息是人们对事物的了解的不确定性的减少或消除,其功能是表征物质客体成分,结构,状态,特性等属性.信息共享的目的在于减少或消除信息源所需的不确定性.石油化工行业由于设备多,生产过程复杂,危险元素 ...
- java map集合遍历方法,Java的Map集合的三种遍历方法
集合的一个很重要的操作---遍历,学习了三种遍历方法,三种方法各有优缺点~~ 1. package com.myTest.MapText; import java.util.Collection; i ...
最新文章
- 9.path Sum III(路径和 III)
- windows 2003 终端服务超出最大允许连接数(远程桌面,解决办法)
- 计算机处理器采用多核,电脑的CPU的多核很有用吗?
- 如何兼职创业并避免风险
- AIX HACMP集群切换测试实际案例解析
- Angularjs 观察者模式 理解
- java 导出excel学习小片段
- Redis BigKey
- OpenStack Rocky Octavia 的实现与分析(零)架构简介
- javascript编辑器_评论:10个最佳JavaScript编辑器
- 原码/补码的加减运算and溢出判断
- 2018年医疗大数据产业的发展及解决方案
- Java咖啡馆---品味第一杯咖啡
- 生鲜配送小程序源码_生鲜配送小程序系统功能开发介绍(附带源码)
- matlab调整视频播放速度,会声会影如果调整视频播放速度
- 阿里云 mysql tps_MySQL_tps
- t检验该怎么分析?如果选择哪种t检验?
- 4.MySQL的DQL查询数据
- 关于如何在Termux上安装kali(最好用旧手机)
- JAVA根据经纬度计算两点距离
热门文章
- 学习excel数据分析_为什么Excel是学习数据分析的最佳方法
- 概率编程编程_概率编程语言的温和介绍
- 数据挖掘之数据预处理
- Cisco Wireless Controller 5508 Configuration Step by Step – Part 1 (CLI and GUI Access, Upgrade)
- notepad++与ISE/Vivado关联
- python时间差转换成天数_Python实现计算两个时间之间相差天数的方法
- externalreferences 命令在 sdi 模式下不可用_一个适合新手交互式Git命令学习项目
- c++ 动态分配数组_C/C++编程笔记:「C语言指针」民间解读版本
- java mongo分组统计_探秘 Dubbo 的度量统计基础设施 - Dubbo Metrics
- php改成IP连接数据库,thinkphp,pdo连接数据库,host自动被替换成了本机ip