预编译语言：Less-Less基础

Less基础

一、Less基础   http://www.bootcss.com/p/lesscss/

  • 历史 
    • LESS由Alexis Sellier于2009年设计。LESS是一个开源。LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替
  • 什么是LESS
  1. LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。
  2. CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。
  3. LESS 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大的回报，一句话，Less is more，借助 LESS 可以更便捷的进行 Web 开发。
  • 为什么要使用LESS？
  1. LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
  2. LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
  3. LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
  4. 可以通过使用LESS 变量来实现更快的维护。
  • 特征
  1. 更清晰和更可读的代码可以以有组织的方式编写。
  2. 我们可以定义样式，它可以在整个代码中重复使用。
  3. LESS是基于JavaScript的，是超集的CSS。
  4. LESS是一个敏捷工具，可以排除代码冗余的问题
  • 优点
  1. LESS轻松地生成可在浏览器中工作的CSS。
  2. LESS使您能够使用嵌套编写更干净，组织良好的代码。
  3. 通过使用变量可以更快地实现维护。
  4. LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
  5. LESS提供使用操作，使得编码更快并节省时间。
  • 缺点
  1. 新的CSS预处理需要时间。
  2. 由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
  3. 与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。

二、使用方式

  1. 客户端
    • 我们可以直接在客户端使用 .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 源文件正确编译解析。
  2. 服务器端
    • 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 的背景颜色已经被改变了

四、如何使用Less  http://www.bootcss.com/p/lesscss/#docs

 
 
 
 
 
 
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/guisenbin/p/10455077.html