less简单使用

     1.介绍

        Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。、】

     2.less使用

        1.创建index.less文件

        2.在vscode中使用插件自动生成index.css文件

     3.less编写

        1.less运算符.可以使用加（+）减（-）乘（*）除（./）等运算符

div{
    width：200px - 100px；
    height：（200px / 2）;
}

        2.嵌套.可以通过父子嵌套的方式写css样式

        

div{
    font-size: 14px;
    div{
        color: red;
    }
    &:hover{
        color:pink;
    }
}
 

        3.变量  。@变量名：值；一般在Less文件最顶部声明变量，在CSS样式里可以调用变量

@color: red;

div{
    a{
        color: @color;
    }
    div{
        h2{
            color: @color;
            font-size: 20px;
        }
    }
    span{
        display: inline-block;
        color: @color;
    }
}