Less基础
一、Less基础 http://www.bootcss.com/p/lesscss/
- 历史
-
LESS由Alexis Sellier于2009年设计。LESS是一个开源。LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替
-
什么是LESS
-
LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。
-
CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。
- LESS 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大的回报，一句话，Less is more，借助 LESS 可以更便捷的进行 Web 开发。
-
为什么要使用LESS？
-
LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
-
LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
-
LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
-
可以通过使用LESS 变量来实现更快的维护。
- 特征
- 更清晰和更可读的代码可以以有组织的方式编写。
- 我们可以定义样式，它可以在整个代码中重复使用。
- LESS是基于JavaScript的，是超集的CSS。
- LESS是一个敏捷工具，可以排除代码冗余的问题
- 优点
- LESS轻松地生成可在浏览器中工作的CSS。
- LESS使您能够使用嵌套编写更干净，组织良好的代码。
- 通过使用变量可以更快地实现维护。
- LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
- LESS提供使用操作，使得编码更快并节省时间。
- 缺点
- 新的CSS预处理需要时间。
- 由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
- 与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。
二、使用方式
- 客户端
- 我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码： <link rel="stylesheet/less" type="text/css" href="styles.less">
- LESS 源文件的引入方式与标准 CSS 文件引入方式一样： <link rel=“stylesheet/less” type=“text/css”href=“styles.less”> //在js之前引入 <script type="text/javascript" src="js/less.min.js" ></script>
- 需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。
- 还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
- 服务器端
- LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译
- 在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如： @import “variables.less”;
- .less 文件也可以省略后缀名，像这样： @import “variables”;引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。
- 使用编译生成的静态 CSS 文件
- 我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。
二、Less体验
1.在根目录下创建 index.html 文件，复制内容如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初识 Less</title> 6 // 自己改下引入的文件路径 7 <link href="./main.less" rel="stylesheet"> 8 </head> 9 <body> 10 <div class="container">1</div> 11 <div class="container2">2</div> 12 <div class="container3">3</div> 13 </body> 14 </html>
2. 在根目录下创建 main.less 文件，复制内容如下：
1 // main.less 2 @ 100%; 3 @height: 100px; 4 @color: red; 5 .container{ 6 width: @width; 7 height: @height; 8 background-color: @color; 9 margin-bottom: 5px; 10 } 11 .container2{ 12 width: @width; 13 height: @height; 14 background-color: @color; 15 margin-bottom: 5px; 16 } 17 .container3{ 18 width: @width; 19 height: @height; 20 background-color: @color; 21 margin-bottom: 5px; 22 }
现在打开浏览器看一下，会发现并没有加载样式。这是因为 index.html 中引入的样式文件是 main.less 而不是 main.css。所以接下来，我们需要将 main.less 转换为 main.css。
3.如何转换为.css
- 服务器端的使用
-
客户端的使用非常简单，在引入less文件后再引入less.js页面中的样式就能正确显示，但是如果想要得到css类型的文件那么还需要一个编译过程
-
node 环境中对 LESS 源文件进行编译
-
在此之前我们先安装好npm包管理器。先安装好nodejs的环境，其中附带有npm。后续我们会学习nodeJs。安装好后在DOC窗口中输入node –v和 npm –v 可查看版本，如果能正确显示则安装完成。然后输入命令：npm install -g less 安装全局的less模块，主要是使用lessc 命令
- 使用编辑器配置方式
-
以Hbuilder为例，在Hbuilder头部栏里 工具---选项---- Hbuilder----预编译器 , 打开后选中.less选择新建。新窗口中，在文件后缀中输入.less。然后直接选择窗口下面的智能完成 按钮，参数会自动填入，最后点击确定按钮即可
三、Less便利之处
- 现在有一个新的需求，需要将三个 div 的背景颜色改成蓝色（blue），如果是之前 css 的写法需要依次找到 container、container2、container3，对应修改里面的 background-color 属性，但是使用 less 我们仅仅修改前面定义过的变量值即可
- 更改后保存再打开浏览器可以看到三个 div 的背景颜色已经被改变了