1. Larry 诺之 UED

2. 我们讨论神马？
•{Less} 动态扩展 CSS
•{Less} 是什么
•如何在网站中使用 {Less}
•熟悉 {Less} 语法规则

3. 为什么使用 {Less} ？
•使用变量和函数
•更少的 CSS 代码
•方便快捷易于修改、维护
•可以在一个项目甚至多个项目中重复使用

4. {Less} 是神马？
•“{Less} 是一种动态的样式语言，将 CSS 赋予了
动态语言的特性。如变量、继承、运算、函数。”
•{Less} 是开源的

5. {Less} 是神马？
•Less可运行在客户端 (I E6+ ,Webkit,Firefox).
•Less可运行在服务端 (N ode.j
s或者 Rhino)
•Less可以被预编译为 CSS
•Less第一个版本是用 Ruby 开发，目前新版是
用 J va
a Script

7. {Less} 提供的机制
•变量 (Variables)
•嵌套 (Nesting)
•混合 (Mixins)
•运算 (Operators)
•函数 (Functions)

8. 在网站中使用 {Less}
•使用 Less官方的 Less.j Less转为 CSS.
s将
http://www.lesscss.org ( 需翻墙 )
http://www.lesscss.net ( 中文官网 )
•也可以使用 PHP 转换 Less为 CSS
http://www.leafo.net/lessphp
•预编译 Less为 CSS ，在网站上引用该 CSS 文件
http://incident57.com/less (ma c)
http://wea rekiss.com/simpless (ma c,windows,linux)

9. 在网站中使用 {Less}
•在官网下载 less.j
s
•将自己的 Less CSS 文件命名后缀为 .less, 比如
style.less.
•在网站 hea 部分引用 less.j
d s以及 style.less.
要注意先后顺序及 type

10. {Less} 语法规则
变量 Va bles
ria
Less CSS
Less 中的变量为完全的”常量”，所以只能定义一次

11. {Less} 语法规则
混合 M ixins
Less CSS
任何 CSS cl
ass id 或者元素 属性集都可以以同样的方式引入

12. {Less} 语法规则
带参数的混合 M ixins
Less CSS
Less支持像函数一样定义一个带参数的属性集

13. {Less} 语法规则
模式匹配 M atching
Less CSS
多个相同 cla 的混合属性集 Less会根据参数的模式匹配
ss

14. {Less} 语法规则
嵌套规则 N ested Rules
Less CSS
& 串联选择器 对 :hover :foc 等伪类非常有用
us

15. {Less} 语法规则
表达式 Expressions
Less CSS

16. {Less} 语法规则
运算 Operations(+ - * /)
Less CSS

17. {Less} 语法规则
颜色函数 Color Functions

18. {Less} 语法规则
M a 函数
th

19. {Less} 语法规则
命名空间 N amespaces
Less CSS
Less中命名空间可以定义一些属性集重复使用，这样可以更好的组织 CSS 或者
更好的封装，变量和混合集可以打包一起 .

20. {Less} 语法规则
作用域 Scope
Less中作用域跟其他的编程语言有些类似 , 就近一致 , 先本地后父级 , 直到找到为止 .

21. Th ank You ！