没有合适的资源?快使用搜索试试~ 我知道了~
1.3.1 1.3.2 1.4.1 1.4.2 1.4.3 2.1.1 2.1.2 2.1.3 2.2.1 2.2.2 2.2.3 2.4.1 2.4.2 2.
资源详情
资源评论
资源推荐
LESS 教程 歪脖先生 著
本教程采用创意共享 4.0 许可证。保持原作者署名和非商用,可自由阅读、分享、修改本教程
1
目 录
1 Less 基础 .............................................................................................. 3
1.1 认识 Less .................................................................................................... 3
1.2 Less 原理 .................................................................................................... 3
1.3 Less 用法 ................................................................................................... 4
1.3.1 浏览器端使用 ............................................................................................ 4
1.3.2 服务器端使用 ............................................................................................ 5
1.4 Less 编译工具 ............................................................................................ 6
1.4.1 选择 Koala 的理由 .................................................................................... 7
1.4.2 如何使用 Koala ......................................................................................... 7
1.4.3 Koala 界面介绍 ......................................................................................... 8
2 Less 特性 ............................................................................................. 12
2.1 变量 .......................................................................................................... 12
2.1.1 普通变量 ................................................................................................. 12
2.1.2 变量插值 ................................................................................................. 13
2.1.3 变量作用域 ............................................................................................. 15
2.2 Mixins ....................................................................................................... 16
2.2.1 什么是 Mixin ........................................................................................... 16
2.2.2 带参数的 mixin ....................................................................................... 18
2.2.3 作为函数的 mixin .................................................................................... 22
2.3 嵌套规则 ................................................................................................... 23
2.4 运算和函数 ............................................................................................... 30
2.4.1 运算........................................................................................................ 30
2.4.2 函数........................................................................................................ 30
2.5 转义字符 ................................................................................................... 31
2.6 注释 .......................................................................................................... 32
2.7 命名空间 ................................................................................................... 32
2.8 @import 指令 ............................................................................................ 32
2.9 !important 关键字 ...................................................................................... 34
2.10 模式匹配 ................................................................................................ 35
2.11 条件表达式 ............................................................................................ 35
2.12 循环 ....................................................................................................... 39
LESS 教程 歪脖先生 著
本教程采用创意共享 4.0 许可证。保持原作者署名和非商用,可自由阅读、分享、修改本教程
2
2.13 合并 ....................................................................................................... 39
2.14 Extend ................................................................................................... 40
3 Less 函数 ............................................................................................. 41
3.1 Color 函数 ................................................................................................. 41
3.2 Math 函数 ................................................................................................. 43
4 参 考 资 料 .............................................................................................. 43
LESS 教程 歪脖先生 著
本教程采用创意共享 4.0 许可证。保持原作者署名和非商用,可自由阅读、分享、修改本教程
3
1 Less 基础
1.1 认识 Less
CSS(层叠样式表)是一项出色的技术,它使得网页的表现与内容完全分离,使网站维
护工作变得更容易,不会因为内容的改变而影响表现,也不会因为表现的改变而影响内容。
作为一门标记性语言,CSS 的先天性优点是语法相对简单,对使用者的要求较低,但它
的致命弱点是需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用。
造成这一现象的很大原因在于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作
用域)等概念。
Less 的出现,为 Web 开发者带来了福音,它是一门 CSS 预处理语言,引入了变量、
运算、函数、继承等功能,为 CSS 语言赋予了动态语言的特性。
Less 大大简化了 CSS 的编写,并且降低了 CSS 的维护成本。就像它的名称所说的那
样,Less 可以让我们用更少的代码做更多的事情。
1.2 Less 原理
Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这
些规则最终会通过解析器,编译生成对应的 CSS 文件。
Less 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法
的基础上,为 CSS 加入程序式语言的特性。先看一个简单的例子,Less 代码如下:
@color: #4d926f;
header {
color: @color;
}
h2 {
color: @color;
}
上面的例子定义了一个变量 @color,然后在选择器 header 和 h2 中使用它。编译后的
CSS 代码为:
header {
color: #4d926f;
}
h2 {
LESS 教程 歪脖先生 著
本教程采用创意共享 4.0 许可证。保持原作者署名和非商用,可自由阅读、分享、修改本教程
4
color: #4d926f;
}
从上面的例子可知,Less 并没有改变 CSS 的语法。因此,学习 Less 非常容易,只要
你了解 CSS 基础,就可以很容易上手。
1.3 Less 用法
Less 可以直接在浏览器端运行(支持 IE6+、Webkit、Firefox),也可以借助 Node.js 或
者 Rhino 在服务端运行。
Less 是一种动态语言,无论是在浏览器端,还是在服务器端运行,最终还是需要编译成
CSS,才会发挥其作用。
1.3.1 浏览器端使用
在浏览器端直接使用 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 文件即可。
LESS 教程 歪脖先生 著
本教程采用创意共享 4.0 许可证。保持原作者署名和非商用,可自由阅读、分享、修改本教程
5
1.3.2 服务器端使用
在开发阶段,在页面中嵌入一个 Less.js 将 Less 在线编译成 CSS 样式,确实很方便。
但是,在线编译会产生加载延迟,即便在浏览器中有不足一秒的加载延迟,也会降低性能。
如果 Javascrip 执行错误,还会引起美观问题。因此,在生产环境中,并不推荐这种方式,而
是推荐在服务器端使用 Less。
在服务器端使用 Less,需要借助于 Less 的编译器,由它将 Less 源文件编译成最终的
CSS 文件。最常用方式,就是利用 node 的包管理器 (npm) 进行安装,安装成功后就可以
在 node 环境中对 Less 源文件进行编译。
安装 Less 编译器
为了方便使用 Lessc 这个全局命令,建议采用全局安装。安装命令如下:
$ npm install Less -g
如果想安装指定版本,也非常方便,只需在安装包后添加 @VERSION 即可。如,安装
1.6.2 版本的命令如下:
$ npm install [email protected] -g
当然,如果你想安装最新版本,可以尝试以下命令:
$ npm install Less@latest -g
整个安装过程无需人工干预,安装完成后的结果如图 1-1 所示:
图 1-1 安装 Less 编译器
代码中用法
只要安装了 Less,就可以在 Node 中像这样调用编译器:
var Less = require('Less');
Less.render('.class { width: 1 + 1 }', function (e, css) {
剩余42页未读,继续阅读
十二.12
- 粉丝: 35
- 资源: 276
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0