LESS学习

最新推荐文章于 2024-09-12 15:24:50 发布

GDYG5

最新推荐文章于 2024-09-12 15:24:50 发布

阅读量139

点赞数

分类专栏： LESS 文章标签： LESS

本文链接：https://blog.csdn.net/GDYG5/article/details/96167026

版权

LESS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

less中的变量：

使用@符定义变量
	@变量名
使用：
	@color：#000000;
	#div01{
		background-color:@color;
	}
	#div02{
		background-color:@color;
	}

less中的嵌套：

使用：
	#div01{
		width:10px;
		height:10x;
		.div01_1{
			background-color:#000;
		}
		&:hover{
			background-color:#fff;
		}
	}
&符：
	表示上面所有的选择器

less中的混合（mixin）

在一个样式集class A中引入另一个样式集class B
使用：
	.style{
		width:100px;
		height:100px;
		background-color:#000;
		border:solid 1px;
	}
	#div01{
		.style;
	}
	#div02{
		.style;
	}
带参数的集合：	
	.style(@1，@2，@3){
		width:@1;
		height:@2;
		background-color:@3;
	}
	#div1{
		.style(10px,10px,#000);
	}

less中的函数和运算

less中的函数：
	less中的函数--映射了JavaScript代码，（可以进行操作属性值）
less中的运算：
	可以进行 加、减、乘、除运算
		@the-border: 1px;
		@base-color: #111;
		@red: #842210;
		#header {
		color: (@base-color * 3);
		border-left: @the-border;
		border-right: (@the-border * 2);
		}
		#footer {
		color: (@base-color + #003300);
		border-color: desaturate(@red, 10%);
		}