less基础

less基础

Less ( Leaner Style Sheets的缩写)是一门CSS 扩展语言,也称为为CSS预处理器。

它在CSS的语法基础之上,引入了变量, Mixin(混入) , 运算以及函数等功能,大大简化了CSS的编写

并且降低了CSS的维护成本,就像它的名称所说的那样, Less 可以让我们用更少的代码做更多的事情。

CSS预处理器

​ 定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

Less使用

我们首先新建一个后缀名为less的文件 ，在这个less文件里面书写less语句。

• Less变量

• Less编译

• Less 嵌套

• Less运算

1.变量

​ @变量名:值

​ （必须以@为前缀，不能包含特殊字符，不能以数字开头，大小写敏感）

2.编译

​ vscode less插件 Easy Less

3.嵌套

#header .logo {
	width: 300px ;
}

嵌套写法：

#header {
	.logo {
		width: 300px
	}
}

如果遇见(交集|伪类|伪元素选择器)

• 内层选择器的前面没有 &符号,则它被解析为父选择器的后代;
• 如果有&符号 ,它就被解析为元素自身或父元素的伪类。

a:hover{
	color:red;
}

嵌套写法：

a{
	&:hover{
		color:red;
	}
}

4.less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

• 乘号(*)和除号(/ )的写法.
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位,则运算结果就取该单位