.box1{
    // 后代元素选择器
    .box2{
        color: red;
    }
    // 子元素选择器
    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }
    // 为box1设置一个hover
    // & 就表示外层的父元素
    // 如此处&表示.box1
    &:hover{
        color: orange;
    }
    div &{
        width: 100px;
    }
}

.p1{
    width: 100px;
    height: 200px;
}
// .p2{
//     width: 100px;
//     height: 200px;
//     color: red;
// }

// :extend() 对当前选择器扩展指定选择器的样式（体现在CSS文件中为选择器分组）
.p2:extend(.box1>.box3){
    color: red;
}
.p3{
    // 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    // 体现在CSS文件中不是选择器分组，而是又单独写了一个CSS语句
    // mixin混合
    .p1;
}


// 使用类选择器时，可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixins
// 通俗理解就是，这样的样式是专门给别人用的，自己不用
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

.p5{
    .p4;
}

// 混合函数  在混合函数中可以直接设置变量

// 不给参数设置默认值，则调用混合函数的时候必须传值
// .test(@w,@h,@bg-color){
//     width: @w;
//     height: @h;
//     border: 1px @bg-color solid;
// }

// 给参数设置默认值，则调用混合函数的时候可以不传值。也可以传，传的话就按传的来
.test(@w:300px,@h:500px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px @bg-color solid;
}
div{
    // 调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);

    // 也可以不按顺序传递参数
    .test(@bg-color:red, @h:100px, @w:300px);
}

span{
    // average()可以传两个参数，取两个颜色参数的平局值
    color: average(red,blue);
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
}
body:hover{
    // darken(color,percent)  返回值是一个颜色，是color加深了percent之后的颜色
    background-color: darken(#bfa,50%);
}
main{
    .test(200px, 100px)
}