【Less-CSS】初识Less，使编写 CSS 变得简洁

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

1.Less简述

less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。

在px单位转换到rem单位过程中，哪项工作是最麻烦的？

答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。

Less是一个CSS预处理器, Less文件后缀是.less；

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力；

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2.LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

3.示例

.less文件：

.father {
    color: red;
 
    width: (68 / 37.5rem);
 
    .son {
        background-color: pink;
    }
}
1
2
3
4
5
6
7
8
9

保存.less文件以后，在同级别的目录下生成的.css文件：

.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  background-color: pink;
}
1
2
3
4
5
6
7

4.less语法

• 四则运算：
  运算： 加、减、乘直接书写计算表达式；
  除法需要添加 小括号 或 .

  //表达式存在多个单位以第一个单位为准！
  div {
      width: 100 + 5px;
      width: 100 -5px;
      width: 100 * 2px;
   
      // 除法
      // 68  > rem
      width: (68 / 37.5rem);
      height: 29 ./ 37.5rem;
   
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 嵌套:快速生成后代选择器。
  语法：

  .父级选择器{
  	//父类样式
  	.子级选择器{
  		//子类样式
  	}
  }
  1
  2
  3
  4
  5
  6

  .father {
  	color:red;
  	.son {
  		color:pink;
  	}
  }
  1
  2
  3
  4
  5
  6

  &不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用。
  .father {
  	color:red;
  	&:hover {
  		color:pink;
  	}
  }
  1
  2
  3
  4
  5
  6
  7

• 使用Less变量设置属性
  语法：

  定义变量：@变量名: 值;
  使用变量：CSS属性：@变量名;
  1
  2

  示例：
  .less文件：

  // 1. 定义. 2.使用
  @colora:green;
   
  .box {
      color: @colora;
  }
   
  .father {
      background-color: @colora;
  }
   
  .aa {
      color: @colora;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

  对应的.css文件：

  .box {
    color: green;
  }
  .father {
    background-color: green;
  }
  .aa {
    color: green;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 导入

开发网站时，网页如何引入公共样式？
答：CSS：书写link标签；
       Less：导入

导入的语法: @import “文件路径”;
导入了这个less文件，保存以后这个less对应的css都会有。

• 导出
  less一保存，都是在当前的路径生成css，
  如果想改变这个路径：
  方法一：实现把less文件夹里的less文件，保存后生成的css文件都放到css文件夹中。

   配置EasyLess插件， 实现所有Less有相同的导出路径；
  
   配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 
   			→ 添加代码（注意，必须是双引号）
  1
  2
  3
  4

  
  实现把less文件夹里的less文件，保存后生成的css文件都放到css文件夹中。

  方法二：
  让对应less文件的css文件导出到另外一个路径；
  Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

  // out: ./qqq/daqiu.css
   
  // out: ./abc/
   
  .box {
      color: red;
  }
  1
  2
  3
  4
  5
  6
  7

  第一行不仅换了位置，还改了css文件名；
  第二行是换位置。./表示当前文件夹的目录

  有一些less不需要导出css文件:
  禁止导出：在less文件第一行添加: // out: false

5.Easy Less插件

Easy Less是vscode插件，其作用：less文件保存自动生成css文件。
一定要在vscode中加了这个插件，才能保存后自动生成css文件。