less-混合-526互联

@width: 200px;
@border: 1px solid red;

div {
    margin: 10px 0;
    border-radius: 10px;
}

.txt-center {
    font-size: 20px/40px '微软雅黑';
    color: #fff;
    text-align: center;
    line-height: @width;
    background: green;
}

// 混合: 把另一个选择器的名字写在这个样式里.这个样式就具有放入的选择器的样式
.box1 {
    width: @width;
    height: @width;
    border: @border;
    .txt-center;
}

.box2 {
    margin-top: 10px;
    width: 300px;
    height: 300px;
    .txt-center;
    .txt-shadow(10px, orange);
    font-size: 60px;
    .border(blue, 10px);
}


// 混合带参数
.txt-shadow(@value, @color) {
    text-shadow: 0 0 @value @color;
}

.box3 {
    height: 200px;
    .txt-center;
    font-size: 80px;
    .txt-shadow(15px, black);
    .border(red, 4px);
}

// 混合带参数,有默认值
.border(@color, @width: 1px) {
    border: @width solid @color;
}

// less混合解决 兼容性问题
.item-shadow(@x: 0, @y: 0, @area: 10px, @color: black) {
    -webkit-box-shadow: @x @y @area @color;
    -moz-box-shadow: @x @y @area @color;
    -ms-box-shadow: @x @y @area @color;
    -o-box-shadow: @x @y @area @color;
    box-shadow: @x @y @area @color;
}

.box4{
    width: 300px;
    height: 300px;
    background-color: red;
    border-radius: 500px;
    .item-shadow(0, 0, 10px, gold)
}