LESS第五课（匹配模式导入其他的less文件）

最新推荐文章于 2023-06-30 15:49:34 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-06-30 15:49:34 发布

阅读量492

点赞数

分类专栏： less讲解

本文链接：https://blog.csdn.net/qq_37805832/article/details/107526114

版权

less讲解专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//记住，@_一定会被执行，第一开始执行的，然后是执行应该执行的啊
就是通过混合的((第一个字符串形参)),来确定具体要执行哪一个同名混合

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*@_:代表通用的匹配模式.
		什么是通用的匹配模式？
		他的优先级最高的,如果同名的混合名称,会优先执行通用匹配模式中的代码@_.
		.triangle(@_,@width,@color)
		{
			width:0;
			height:0;
			border-style:solid solid solid solid;
		}
		.triangle(Down,@width,@color)
		{
			border-width:@width;
			border-color:@color transparent transparent transparent ;
		}
		.triangle()
		{
			border-width:@width;
			border-color:transparent transparent @color  transparent;
		}
		.triangle(Left,@width,@color)
		{
			border-width:@width;
			border-color:transparent  transparent transparent @color;
		}
		div
		{
			//.triangle(Right,80px,green);
			.triangle(Down, 80px, green);
		}
		*/
	/*编译后的css代码*/
	div {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
  border-width: 80px;
  border-color: green transparent transparent transparent;
}

	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

导入其他的less文件:
//这下面是导入的文件=====================

 .triangle(@_, @width, @color){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}
.triangle(Down, @width, @color){
  //width: 0;
  //height: 0;
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
  //width: 0;
  //height: 0;
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
  //width: 0;
  //height: 0;
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
  //width: 0;
  //height: 0;
  border-width: @width;
  //border-style: solid solid solid solid;
  border-color: transparent transparent transparent @color;
}
==========================================

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*@import "triangle.less";/*.less可以省略,为什么,因为在less文件中只能导入less的文件*/
		/*div
		{
			.triangle(Down,40px,red);
		}*/
		/*编译后的css文件*/
		div {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
  border-width: 40px;
  border-color: #ff0000 transparent transparent transparent;
}

	</style>
</head>
<body>
	<div></div>
</body>
</html>

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
LESS第五课（匹配模式导入其他的less文件）

//记住，@_一定会被执行，第一开始执行的，然后是执行应该执行的啊就是通过混合的((第一个字符串形参)),来确定具体要执行哪一个同名混合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*@_:代表通用的匹配模式. 什么是通用的匹配模式？他的优先级最高的,如果同
复制链接

扫一扫