从零开始学 Web 之 移动Web（八）Less

你们好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公众号：Web前端之巅
• 博客园：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的探索之旅吧！

1、Less简介

LESS 是一种动态的样式表语言，经过简洁明了的语法定义，使编写 CSS 的工做变得很是简单，本质上，LESS 包含一套自定义的语法及一个解析器。

2、less 安装

一、下载安装 node.js 环境。（官网：https://nodejs.org/zh-cn/）

二、安装完成后验证 node 环境是否安装成功。

在命令行中输入：node -v 出现 node 的版本号表示安装成功。

三、安装 less 工具（须要联网）。

在命令行中输入：npm install -g less 便可下载安装。

四、安装后验证 less 是否安装成功。

命令行输入：lessc -v 出现 less 版本号，即表示安装成功。

3、编译

浏览器只能识别 CSS，Less 只是用来提高CSS可维护性的一个工具，所最终须要将LESS编译成CSS。

编译方式有两种：

一、一种是使用命令行的方式手工编译。

在咱们编写好一个 less 文件后，可使用命令行输入如下指令将 less 文件编译成 css 文件。

lessc .\test.less .\test.css

这种手工编译的方式效率比较低下，通常咱们都会借助一些编辑器来完成自动编译。

二、这里我使用 vscode，使用很简单，只须要安装插件 “Easy LESS” ，那么编写的 less 文件在保存时会自动在 less 文件相同的目录下生成 css 文件。

4、语法

一、注释

注释的方式有两种：// 或者 /**/ 。

可是这两种注释有区别：这两种样式在 less 中都是注释，可是 // 注释不会进行编译，也就是不会在生成的 css 文件中显示，而 /**/ 注释则会在 css 文件中对应显示。

/*注释  才会编译*/
//这也是样式，可是不会进行编译

二、变量

语法格式为：@变量名：值; ，好比 @baseColor: #ccc;

使用的时候： div { color: @baseColor;}

/*变量  @变量名:值; */
@baseColor:#e92322;
a{
  color: @baseColor;
}

三、混入（相似于函数）

语法：.样式名(@变量名 ：默认值) {具体样式}

/*混入:能够将一个定义好的样式引入到另一个样式中  相似于函数的调用*/
/*.addRadius{
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}*/
/*至关于定义一个函数的参数*/
.addRadius(@r:10px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*引入已经写好的圆角样式*/
  /*传入参数*/
  .addRadius(5px);
}

四、嵌套

嵌套能够实现选择器的继承，能够减小代码量，同时使用代码结构更加清晰。

/* 之前咱们写的样式
.jd_header{}
.jd_header > div{}
.jd_header > div > h3{}
.jd_header > div > h3::before{}
.jd_header > div > a{}
.jd_header > div > a:hover{}
*/


/*嵌套:实现选择器的继承，能够减小代码量，同时使用代码结构更加清晰*/
.jd_header{
  width: 100%;
  height: 200px;
  .addRadius();
  // 加 > 表示直接子元素
  > div{
    // 加 & 表示中间没有空格为 div::before，若是没有 & 则是 div ::before 就错了。
    &::before{
      content: "";
    }
    width: 100%;
    // div下面的直接子元素a
    >a{
      text-decoration: underline;
      // a::hover，中间没有空格
      &:hover{
        text-decoration: none;
      }
    }
    > h3{
      height: 20px;
    }
    ul{
      list-style: none;
    }
  }
}

5、less 文件引入

咱们以前编写好 less 文件以后，都是自动解析成 css 而后添加到 html 文件中。若是 css 的文件不少的话，就要引入不少个 link 标签，那么可不能够直接引入 less 文件呢？

固然能够。

语法：

<link rel="stylesheet/less" href="./index.less">

只是在 stylesheet 后面加上 less 的说明。

只是引入 less 文件是不能够的，还须要引入解析 less 的 js 插件。

<script src="./js/less.js"></script>

看起来好麻烦哦，为何要引入 less 文件，它有什么好处吗？

好处是：无论有多少 less 文件，只须要引入一个 less 文件就能够了，其余须要的 less 文件都包含在引入的这个 less 文件中。

如何在 less 文件中引入其余 less 文件呢？

语法：

@import "other1.less";  // other.less 为其余 less 文件的路径名称
@import "other2.less";
@import "other3.less";

这样，无论有多少个 less 文件，均可以写到一个待引入的 less 文件中。