less-匹配

匹配模式.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)
}