匹配模式.PNG
// .sanjiao {
// width:0;
// height: 0;
// overflow: hidden;
// border-width: 10px;
// border-color: red transparent transparent transparent;
// border-style: dashed dashed solid dashed;
// }
// 匹配模式
.triangle(top, @w:5px, @c:#ccc) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom, @w:5px, @c:#ccc) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left, @w: 5px, @c: #ccc) {
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right, @w: 5px, @c: #ccc) {
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//@_表示最终不管选谁都会带上的选项
.triangle(@_, @w:5px, @c: #ccc){
width: 0;
height: 0;
overflow: hidden
}
.sanjiao {
.triangle(top, 100px)
}
// 匹配模式-定位
.pos(r) {
position: relative;
}
.pos(a) {
position: absolute
}
.pos(f) {
position: fixed;
}
.pipei {
width: 200px;
height: 200px;
background-color: green;
.pos(f)
}
