LESS第五课（匹配模式 导入其他的less文件）
//记住，@_一定会被执行，第一开始执行的，然后是执行应该执行的啊 就是通过混合的((第一个字符串形参)),来确定具体要执行哪一个同名混合
<!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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/07/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
