less基础

最新推荐文章于 2024-07-11 15:29:37 发布

cvdalao

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量85

点赞数

文章标签：前端 less

本文链接：https://blog.csdn.net/cvdalao/article/details/125881956

版权

概念：是css的预处理语言（less和sass，在之间样式的基础上，增加了一些编程思想

浏览器不识别less文件，所以需要将less转成css才行
安装插件：EasyLess 将less同步转成css文件

/* less和css文件引入 @import 文件地址 ;*/
//在less文件中引入css 直接引入是地址
// @import "./reset.css";
//在less文件中引入另一个less文件将内容复制过来 less后缀可以省略
@import "./reset";

&引用父级元素

div{
    width: 300px;
    height: 300px;
    background-color: red;
    p{
        width: 200px;
        height: 200px;
        background: pink;
        span{
            i{
             color: skyblue;
            }
        }
    }
    &:hover{
        background: #000;
    }
}

继承

/* 6-&:extend(继承的样式)  会解析成群组选择器那样 */
.box1{
    width: 200px;
    height: 200px;
    background-color: #000;
}
h2{
    // .box1;
    &:extend(.box1);
}