Less_css_介绍.pdf

Transcript

1. LESS CSS 介绍 ECD kamalyu
2. Index • 语法介绍 • 1.4.0 Beta 新特性 • 优缺点 • 怎样使用 • 其它
3. 语法介绍-变量 LESS 编译后
4. 语法介绍-混合 LESS 编译后
5. 语法介绍-混合（带参数） LESS 编译后
6. 语法介绍-混合（带参数） LESS 编译后 稍后阅读：@arguments 变量；高级参数用法与 @rest 变量；
7. 语法介绍-继承 LESS 编译后 稍后阅读：& 的高级用法；@extend 继承用法（Beta）；
8. 语法介绍-运算 LESS 编译后
9. 语法介绍-函数 LESS 提供了多种函数 用于控制颜色变化、处理字符串、算术运算等等。 稍后阅读：LESS内置函数；
10. 语法介绍-作用域 LESS 编译后 与其它编程语言类似 先从本地模块中查找变量或者混合模块， 没找到的话就去父级作用域中查找，直到找到为止。
11. 语法介绍-注释 LESS 编译后 /* CSS风格的注释解析后会保留 */ //双斜线的注释会自动过滤
12. 语法介绍-禁止编译 LESS 编译后 需要输出不标准的CSS语法的时候 在字符串前加上一个 ~， 用“”把避免直接编译的值包裹起来， 用反斜杠 \ 转意引号
13. 语法介绍-Importing 可以通过以下两种方式导入 LESS 文件 也可以导入CSS文件 @import-once 只导入一次，LESS 1.4.0 以上默认执行 @import-once
14. 语法介绍-1.4.0 Beta import 解析后
15. LESS 优缺点 1. 变量，多处使用的内容取一个有意义的名字，不止是方便修改 2. 浏览器前缀不再是问题 3. 嵌套写法 LESS 的优点 LESS 的缺点 1. 重复定义，文件快速膨胀【1.4.0 会引入 @extend .mixins; 可以部分解决这个问题】 2. 维护，需要修改LESS文件，而不是编译后的CSS文件【组内统一思想】 3. 高耦合，谨慎修改基类【良好的编码习惯，模块化代码】 4. 嵌套，容易写出非常长的嵌套规则【良好的编码习惯】 5. 调试，默认编译后的CSS是压缩过的【配置IDE不压缩】
16. 怎样使LESS 如果用的是 Intellij IDE ： 1. 下载这个插件 LESS CSS Compiler； 2. File -> Settings -> Plugins -> Install plugin from disk； 3. FIle -> Settings -> LESS Profiles， 配置 LESS 文件路径和输出的 CSS 文件路径， 这 里可以选择是否压缩CSS文件。 其他编辑器请 Google 之。
17. 延伸阅读 官网： http://www.lesscss.org 官网中文克隆： http://www.lesscss.net LESS on Github：https://github.com/less 使用后的思考： the problem with css pre processors my thoughts on less
18. Thanks ECD kamalyu