css 预编译处理器 - Less

Less 是三大css 预编译处理器之一！

一、基础语法

1、变量

@test: red; // 定义变量
h1{
    color: @test;  // 引用变量
}

// 编译后

h1 {
    color: red;
}

2、混合

混合器主要用于提取高度复用的代码块独立出来，提供需要使用时引入代码块。

.test{
    color: red;
    background: green;
}
h1{
    .test();  // 引用 .test的样式
}

******编译后*******

.test{
    color: red;
    background: green;
}
h1{
    color: red;
    background: green;
}

 

3、嵌套

h1{
    h2{
        color: red;
    }
    h3{
        color: green;
    }
}

***********编译后等同于***********

h1 h2{
    color: red;
}
h1 h3{
    color: red;
}

 

4、运算

@width: 10mm + 5cm; // 4cm
@height: 100px;
@color: #224488 / 2; //结果是 #112244
@width2: 2 * @width; // 8cm
@height2: @height / 2; // 50px
@width3:  2px * 2cm; // 4px
@width4: 2cm * 2px; // 4cm
@width5: 100px - 2cm; // 24.40944882px

加减运算：运算结果将使用左侧运算单位，并且结果不能小于0，否则无效

乘除运算：带单位算将没有真正意义。运算结果将只使用最左侧存在运算数值单位，其余去除单位进行运算。

颜色运算：将会对16进制数字运算等到结果。

 

5、转义

转义允许使用任何字符串作为属性或变量值；

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 编译后

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

在less3.5版本开始，转义已经不再需要了。

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

 

6、函数

使用内置函数计算百分比

@width: 0.5;

.class {
  width: percentage(@width); // 数字转化为百分比
}

可查看官方函数手册了解更多内置函数 函数手册

tips: less没有像sass那样的自定义函数，只有混合器mixins, 就算函数也是通过混合器改写。网上有第三方插件可以支持函数。

 

7、命名空间

#namespace(){  // 定义命名空间
	.green{
		color: green;
	}
	.red{
		color: red;
		#blue{
			color: yellowgreen;
		}
	}
	#blue{
		color:blue;
	}
}

.test{
	#namespace .red #blue();
}

#name（）{}  // 定义命名空间

#name.green()  // 调用，还可以写成 #name .green() ，或  #name > .green()

如果属性非类选择器命名则必须使用空格或 > 分隔开。

 

8、映射

.map{
	color: red;
}

.test{
	color: .map[color];  // 映射.map的color属性
}

也可以从命名空间中映射属性

 

9、作用域

@color: red;
.test{
	@color: blue;
	color: @color;
}

// 编译后

.test{
	color: blue;
}

与其他语言一样，变量从里向外查找变量，就近原则，优先使用里面的变量属性。

 

10、导入

import "less";  // 导入的文件如果是less后缀，可省略拓展名
import "index.css";

可以导入less文件和css文件。less完全兼容css。如果导入的文件如果是less后缀，可省略拓展名。

 

需要更标准更官方更详细的教程可阅读

https://less.bootcss.com/

 

 

注：个人学习笔记非标准答案，不喜勿喷！