Less简明教程
1.3.1 浏览器端使用
阅读(

Less 基础

认识 Less

Less 原理

Less 用法

Less 可以直接在浏览器端运行(支持IE6+、Webkit、Firefox),也可以借助Node.js或者Rhino在服务端运行。

Less是一种动态语言,无论是在浏览器端,还是在服务器端运行,最终还是需要编译成 CSS,才会发挥其作用。

浏览器端使用

在浏览器端直接使用Less,浏览器会直接为页面应用编译后的CSS样式,而不是生成单独的CSS文件。

在浏览器端直接使用Less,需要一个脚本的支持,这个脚本就是Less.js,它Less解析器,可以在浏览器端把 .less 文件解析成CSS样式。你可以从 http://Lesscss.org下载最新版本的Less.js。

浏览器端使用Less,只需两步:

第一步,引入 .less 文件。

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

可以看出,Less 源文件与标准 CSS 文件的引入方式完全相同,只是在引入 .less 文件时,要将 rel 属性设置为“stylesheet/less”。

第二步,引入Less.js文件。

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

需要特别注意的是:

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

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验