less的mixin

less的官网：http://lesscss.org/

使用node下载less：

npm install -g less

编译less文件：

lessc styles.less styles.css

css有什么问题，为什么要使用预编译的less？

因为样式庞大以后，层次不清晰，它不像html一样有树状的文档结构，我们总是会找：谁谁谁的父类选择器是谁，css样式表会很乱。

如何使用less？

先写less文件，然后用命令行lessc命令编译成css文件，html中引入css的方式是外部引入（浏览器读的永远是css，而不是less，less方便程序员阅读和写）。

mixin翻译过来就是混合，它类似于函数，可以传参，可以调用。

现在有一段代码，可以画出一个三角形：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="css/css02.css" />-->
		<style type="text/css">
			#wrap .sjx {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 60px;
				border-color: transparent transparent transparent green;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<div class="sjx">

			</div>
		</div>
	</body>

</html>

现在我们使用外部引入：

<link rel="stylesheet" type="text/css" href="css/css02.css" />

然后我们编写less文件：

.triangle(@borderwidth, @color) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: @borderwidth;
    border-color: transparent transparent transparent @color;
}

#wrap .sjx {
    .triangle(60px, yellow);
}

这里的.triangle就是一个mixin，它被选择器调用了。而且这里的border-width和border-color是动态传入的。

编译后的css文件为：

#wrap .sjx {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px;
  border-color: transparent transparent transparent yellow;
}

这和我们直接写是一样的。

@import

.triangle的代码甚至可以提出来，就像一个写好的外部接口一样，我们把它放入mode_match.less文件中，然后使用外部引用的方式导入：

@import "mode_match.less";

less中的模式匹配

现在真正的代码就是

@import "mode_match.less";

#wrap .sjx {
    .triangle(60px, yellow);
}

我们能做的就是丰富外部接口.triangle。

比如有这么一个需求：

根据传入的参数不同，三角形的朝向不同。

所以，我们要把朝向作为一个参数传入混合。

.triangle() {
    width: 0;
    height: 0;
    border-style: solid;
}

.triangle(R, @borderwidth, @color) {
    .triangle();
    border-width: @borderwidth;
    border-color: transparent transparent transparent @color;
}

.triangle(L, @borderwidth, @color) {
    .triangle();
    border-width: @borderwidth;
    border-color: transparent @color transparent transparent;
}

.triangle(T, @borderwidth, @color) {
    .triangle();
    border-width: @borderwidth;
    border-color: transparent transparent @color transparent;
}

.triangle(B, @borderwidth, @color) {
    .triangle();
    border-width: @borderwidth;
    border-color: @color transparent transparent transparent;
}

less文件中写多一点是没有问题的，因为它就是预编译的，我们会编译好，然后再在运行时给浏览器读css。

因为width，height，border-style都是重复代码，所以把它给抽取出来了，其他的三个混合，都传入了一个匹配的模式，即L，R，T，B。

调用的时候这么调：

@import "mode_match.less";

#wrap .sjx {
    .triangle(B,80px, red);
}

看看编译后的css：

#wrap .sjx {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 80px;
  border-color: red transparent transparent transparent;
}

也就是先调抽取出来的方法，再调特有的方法。

来源：CSDN

作者：weixin_43810802

链接：https://blog.csdn.net/weixin_43810802/article/details/104021493

标签

css

less

css三角形

html代码

css样式