系列文章目录
一:Less学习系列之extend继承
二:Less学习系列之Mixins混合
三:Less学习系列之匹配模式(Mixins混合的一种形式)
一、问题背景
之前开发的时候,经常会用到position定位,然后通过设置top、left、bottom、right来控制元素的位置,但是通常情况下,只需要设置其中的两个值,如果使用默认值+命名参数的形式,那么剩余的值也需要传递,这样就有点麻烦。学习了匹配模式以后,很好的解决了这个问题。
二、代码实现
/*less代码*/
@ctl:red;
@ctr:yellow;
@cbl:blue;
@cbr:green;
.position(@_, @type, @num1, @num2) {
position: @type;
}
.position(TL, @type, @top, @left) {
top: @top;
left: @left;
}
.position(TR, @type, @top, @right) {
top: @top;
right: @right;
}
.position(BL, @type, @bottom, @left) {
bottom: @bottom;
left: @left;
}
.position(BR, @type, @bottom, @right) {
bottom: @bottom;
right: @right;
}
.tl{
.position(TL,absolute,10px,10px);
color:@ctl;
}
.tr{
.position(TR,absolute,10px,10px);
color:@ctr;
}
.bl{
.position(BL,absolute,10px,10px);
color:@cbl;
}
.br{
.position(BR,absolute,10px,10px);
color:@cbr;
}
/*编译后的代码*/
.tl {
position: absolute;
top: 200px;
left: 200px;
background-color: yellow;
}
.tr {
position: absolute;
top: 200px;
right: 200px;
background-color: blue;
}
.bl {
position: absolute;
bottom: 200px;
left: 200px;
background-color: red;
}
.br {
position: absolute;
bottom: 200px;
right: 200px;
background-color: green;
}
(1):匹配模式可以理解为if判断,
TL/TR/BL/BR
就是判断条件,如果传入的匹配的是TL
,就是用top
和left
,其余的三种情况类似
(2):@_
是Mixins混合,匹配模式中的一个语法,代表匹配所有的情况,一般情况下,这个混合中放的是公共的样式集
效果图
三、使用匹配模式绘制三角形
position定位是实际开发中遇到的问题,匹配模式有个很经典的应用,就是用来画三角形
//@_公共样式
.triangle(@_,@width,@style,@color) {
border-width: @width;
border-style: @style;
}
.triangle(Top,@width,@style,@color) {
border-color: transparent transparent @color transparent;
}
.triangle(Bottom,@width,@style,@color) {
border-color: @color transparent transparent transparent;
}
.triangle(Left,@width,@style,@color) {
border-color: transparent @color transparent transparent;
}
.triangle(Right,@width,@style,@color) {
border-color: transparent transparent transparent @color;
}
.only-top {
.triangle(Top,100px,solid,red);
}
.only-bottom {
.triangle(Bottom,100px,solid,yellow);
}
.only-left {
.triangle(Left,100px,solid,blue);
}
.only-right {
.triangle(Right,100px,solid,green);
}