前端——Less

简介

• 是一门CSS预处理语言，是对CSS语言的扩展

功能

1.变量

• eg:@height:200px;—height是变量名，200px是对应的值

2.混合

• 在一个规则集中使用另一个规则集，.name—使用.name()

3.嵌套

• 提供了嵌套，代码简洁
• eg:

	#box {
		a {
		}
		b {
		}
	}

• 扩展
  • &—>当前选择器的父级
  • @规则也可以嵌套，但是解析是会被放在最前面，是独立的

4.运算

• + - * /
  • 数字，颜色，变量都可以计算
  • 单位换算，以左侧的为准

5.转义

• 使用任意字符串作为属性或变量值
  • 定义：@min768: (min-width: 768px);
  • 使用：直接使用@min768

6.函数

• less 内置了多种函数用于转换颜色、处理字符串、算术运算等

7.命名空间和访问符

• 重用的变量或混合放在一定的命名空间下
• 通过 .或> 调用

8.映射

• 规则集：#colors[primary];–可以获取对应的值

9.作用域

• 本地查找变量和混合，没有则从“父”级作用域继承
• 混合（mixin）和变量的定义不必在引用之前事先定义

10.注释

• 行注释：/
• 块注释：/**/

11.导入

• @import 文件名称

内置函数

注：未涉及的可以查询官方文档

• if：if((3 > 1), 0(true), 3(false))
• boolean：boolean(luma(@bg) > 50%)
• escape：escape(string); 通过 URL-encoding 编码字符串
• e：e(string); 对字符串转义
• replace：replace(“Hello,less”,“less?”,“Less”)
• length：length(@list)
• extract：extract(@list, 3);返回列表指定位置的值，索引从1开始
• range
  • range(3):1,2,3
  • range(10px,40px,10):10,20,30,40
• each()
  • eg:

  	.set() {
  	  one: blue;
  	  two: green;
  	  three: red;
  	}
  	.set-2 {
  	  each(.set(), .(@v, @k, @i) {
  	    @{k}-@{i}: @v;
  	  });
  	}