前端知识——css 之预处理器 less 语法

常见的预处理器：

• Sass/Scss：
  • 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml（一种模板系统）的一部分
  • 目前受LESS影响，已经进化到了全面兼容CSS的SCSS
• Less:
  • 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者更容易上手
  • 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用
  • 另外反过来也影响了SASS演变到了SCSS的时代
  • 著名的Twitter Bootstrap就是采用LESS做底层语言的，也包括React的UI框架AntDesign。
• Stylus:
  • 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持
  • 语法偏向于Python, 使用率相对于Sass/Less少很多

1. less 语法

less 代码如何被编译成CSS代码运行：

• 方式一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译
• 方法二：通过VSCode插件来编译成CSS或者在线编译
  • https://lesscss.org/less-preview/
• 方式三：引入CDN的less编译代码，对less进行实时的处理
  • <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
• 方式四：将less编译的js代码下载到本地，执行js代码对less进行编译

1.1 变量（Variables）

在Less中使用如下的格式来定义变量：

@变量名: 变量值;

1.2 嵌套（Nesting）

Less提供了选择器的嵌套

特殊符号：& 表示当前选择器的父级

// 1.定义变量
@mainColor: #a40011;
@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;

// 2.选择器的嵌套
.box {
	.pel {
		color: @mainColor;
		font-size: @normalFontSize;
	}

	h1 {
		.keyword {
			color: @mainColor;
			font-size: @bigFontSize;
		}
	}
		
	p {
		a.link {
			color: @mainColor;
			font-size: @smallFontSize;
			background-color: #0f0;
			
			&:hover {
				// 等于 a:hover
				color: #00f;
			}
		}
	}
}

1.3 运算（Operations）

在Less中，算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。

• 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准
• 如果单位换算无效或失去意义，则忽略单位

1.4 混合（Mixins）和映射（Maps）

混合是一种将一组属性从一个规则集（或混入）到另一个规则集的方法

• 混入也可以传入变量

映射是提取一组属性中的某个属性的方法

// 1.运算
// .box {
//   font-size: 20px;
//   width: 10% + 50px;
//   height: 100px;
//   background-color: #ff0000 + #00ff00;
// }

// 2.混入
.nowrap_ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.box_border(@borderWidth: 5px, @borderColor: purple) {
	border: @borderWidth solid @borderColor;
}  

.box_size {
	width: 100px;
	height: 100px;
}

.box1 {
	// 2.3.混入和映射(Map)结合使用
	// 作用: 弥补less中不能自定义函数的缺陷
	width: .box_size()[width];
	background-color: #f00;
	
	// 2.1. 混入的基本使用
	.nowrap_ellipsis();
	.box_border();
}

.box2 {
	width: 150px;
	background-color: #0f0;
	
	.nowrap_ellipsis();
	// 2.2.混入是可以传递参数(定义变量)的
	.box_border(10px, orange);
}

1.5 其他语法补充

• extend继承：
  • 和mixins作用类似，用于复用代码
  • 和mixins相比，继承代码最终会转化成并集选择器
• Less内置函数：
  • Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
  • 内置函数手册：https://less.bootcss.com/functions/
• 作用域：
  • 在查找一个变量时，首先在本地查找变量和混合（mixins）
  • 如果找不到，则从“父”级作用域继承
• 导入：
  • 导入的方式和CSS的用法是一致的
  • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了
  • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

// 1.extend
// .box_border {
//   border: 5px solid #f00;
// }

// .box {
//   width: 100px;
//   background-color: orange;
//   .box_border();
//   &:extend(.box_border);
// }

// 2.内置函数
// .box {
//   color: color(skyblue);
//   width: convert(100px, "in");
//   font-size: ceil(18.5px);
//   background-color: orange;
// }

// 3.作用域(scope)
@mainColor: #f00;

.box_mixin {
	@mainColor: orange;
}

.box {
	// @mainColor: #0f0;
	
	.item {
		span {
			color: @mainColor;
			.box_mixin();
			// @mainColor: #00f;
		}
	}
}

2. 认识 Sass 和 Scss

Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进；后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的。