学习Less-看这篇就够了

前言

CSS的短板

    作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。

    问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。

预处理语言的诞生

其中 就我所知的有三门语言：Sass、Less 、Stylus 。
1. Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说 它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎，并且它的项目团队很是强大 ，是一款十分优秀的预处理语言。
2. Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
3. Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。

选择预处理语言

这是一个十分纠结的问题。

1. 在我看来，这就好比 找女朋友，有人喜欢 贤惠安静的，就有人喜欢 活泼爱闹的，各有各的爱好，可晚上闭灯后 其实都差不多，所以你不用太过纠结。当然了 ，首先 你要有女朋友。

2. 在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间 ，Less 稍胜一筹，这也是我选择 Less 的原因。

3. Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性，所以学习 Less 是一件非常舒服的事情。

如果你之前没有接触过预处理语言，纠结应该学哪一个，不如先看看 下面 Less 的介绍，我相信你会爱上它的。

使用 Less 的前奏

使用 Less 有两种方式
1. 在页面中 引入 Less.js
- 可在官网下载
- 或使用CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

  需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

1. 在命令行 使用npm安装

npm install -g less

具体使用命令

$ lessc styles.less > styles.css

假如还有问题，官网已经有了明确的步骤。

如果你也是 Webpack 的使用者，还需要配合 less-loader 进行处理，具体可见我的这篇文章：Webpack飞行手册，里面详细说明了 less 的处理方式。

如果你在本地环境，可以使用第一种方式，非常简单；但在生产环境中，性能非常重要，最好使用第二种方式。

正文

下面我将简介 Less 的功能特性。

变量

我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护。
理想状态，应是下面这样：

const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);

只要我们修改 bgColor这一个变量， 整个页面的背景颜色都会随之改变。

而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。
1. 值变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成后的 CSS */
#wrap {
  color: #999;
  width: 50%;
}

以 @ 开头 定义变量，并且使用时 直接 键入 @名称。

在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

1. 选择器变量

   让 选择器 变成 动态

/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{
     //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}
.@{Wrap}{
    
  color:#ccc;
}
#@{Wrap}{
    
  color:#666;
}

/* 生成的 CSS */
#wrap{
  color: #999;
  width: 50%;
}
.wrap{
  color:#ccc;
}
#wrap{
  color:#666;
}

1. 属性变量

   可减少代码书写量

/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
#wrap{
  border-style:solid;
}

1. url 变量

   项目结构改变时，修改其变量即可。

/* Less */
@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
body {
  background: url("../img/dog.png");
}

1. 声明变量

   有点类似于 下面的 混合方法

   • 结构: @name: { 属性: 值 ;};

   • 使用：@name();

     /* Less */
     @background: {
           background:red;};
     
     #main{
     
       @background();
     }
     @Rules:{
       width: 200px;
       height: 200px;
       border: solid 1px red