前段less的简单使用

/*less 的使用: less的写法对于css稍有不同,安装了easy less插件后保存less文件会自动生成同名css文件*/
/*less 使拥有了变变量值 @起头后跟变量名:后是变量值*/
@color: pink;
div{
    width: 100px;
    height: 100px;
    background-color:@color;
}
/*这是使用方法 @后的变量名区分大小写*/
.div1{
    /*他的子代要这样写*/
    .div2{
        background-color: darkblue;
    }
}
/*他要使用伪类元素/伪类/伪类结构要这样:  用 &代表他本身*/
.div3{
    &::before{ 
        content: "";
       color: #000;
    }
    &:hover{

    }
    & div:nth-child(1)
    {
        color: @color;
    }
}
/*less可以直接进行计算(+ - * / 都可以)*/
@ourfont:50px;
.div5{
    /*计算符号两边必须有空格隔开*/ 
    width: @ourfont + 5;/*若只有一个单位则按这个单位\结算*/
    /*若有两个单位则按第一个单位结算*/
}