less的使用（变量，嵌套，伪元素，伪类，媒体查询）

//变量

//嵌套

//伪类：如：hover，  & 代表当前所选择的标签

//伪元素 如：befor   &：： 代表当前选择的标签

//媒体查询

//1.声明变量

@width:500px;

@background-color:blue;

.wsx {

    width: @width;

    height: 100px;

    background-color: @background-color;

    //嵌套写法

    a{

        color: red;

    }

    p {

        width: 50px;

        height: 50px;

        background-color: antiquewhite;

        //伪类

        &:hover{

            background-color: aqua;

        }

        //伪元素

        &::before {

            content: '';

            width: 20px;

            height: 20px;

            background-color: black;

            display: block;

        }

        //媒体查询，当浏览器分辨率到达一个值，显示下面颜色

        @media screen and (min-width:1000px) {

            background-color: brown;

        }

    }

}