移动端第二十一章 less功能

最新推荐文章于 2023-06-20 16:34:00 发布

LW0512

最新推荐文章于 2023-06-20 16:34:00 发布

阅读量213

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108936313

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Less预处理器的几个核心特性，包括变量的使用，如@color:red;，嵌套规则，如选择器的嵌套写法，运算功能如+、-、*、/，以及混合(Mixins)的概念，包括普通混合和带参数的混合。同时，还提到了Less的注释符号和文件导入方法@import。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

less功能

1:less 变量

–css中的颜色和字号使用less 变量来存储
–less 变量的命名 @color:red;

–变量命名的规则：

1）：必须@符号开头
2）：名字不能是数字
3）：名字不能包含特殊字符 @a#!  @~col
4) ：区分大小写
--@color:red; @n:100px; @font:font-szie:100px;

2:less 嵌套

css写法：

	#header {
	  color: black;
	}
	#header .navigation {
	  font-size: 12px;
	}
	#header .logo {
	  width: 300px;
	}

less写法：

	#header {
	  color: black;
	  .navigation {
	    font-size: 12px;
	  }
	  .logo {
	    width: 300px;
	  }
	}

b伪类或者伪类元素的写法必须加&符号

css写法：

	a:hover{
		color:blue;
	}

less写法：

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

3：运算 + - * / （）

--有括号先算括号
--按照运算的优先级运算
--单单位会按照单位显示
	--60px/2=30px 60/20rem=3rem
--双单位会按照前面值的单位显示
	--60rem/20px=3rem
--字号，宽高，背景色都可以运算
--运算过程中，运算符号两边必须加空格

4:混合（Mixins）

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

普通混合

举例：

less--
.w(){
	width: 400px;
	height: 400px;
}

.a{
	.w();
	background: red;
}
.b{
	.w();
	background: yellow;
}
css--
.a {
  width: 400px;
  height: 400px;
  background: red;
}
.b {
  width: 400px;
  height: 400px;
  background: yellow;

参数混合

less–

举例1：

.w(@a,@b){
		width: @a;
		height: @b;
	}
	
	.a{
		.w(100px,200px);
		background: red;
	}
	.b{
		.w(300px,400px);
		background: yellow;
	}

举例2：

.w(@a:100px,@b:200px){
		width: @a;
		height: @b;
	}
	
	.a{
		.w();
		background: red;
	}
	.b{
		.w(300px,400px);
		background: yellow;
	}

5:less注释符号：

--单行注释 //
--多行注释 /**/

6:导入less文件 @import ‘’；

--@import 'style';  这样会自动将style.css文件 导入到当前的css文件里面