less预处理器

最新推荐文章于 2024-08-17 23:30:44 发布

小艾同学喔

最新推荐文章于 2024-08-17 23:30:44 发布

阅读量619

点赞数 2

文章标签： css css3 html5 html less

本文链接：https://blog.csdn.net/al654123/article/details/104738761

版权

Less是一门CSS扩展语言，它提供插件安装、嵌套、变量、运算和文件导入等功能。通过使用Less，可以更方便地管理和组织CSS代码，提高开发效率。

摘要由CSDN通过智能技术生成

一、less预处理器

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

1.插件安装

安装Easy LESS插件就能使写入的.less文件保存时自动生成.css文件
在这里插入图片描述

2.用法

1.less中的语法完全兼容css语法。

2.HTML引入时，需要引入的是CSS文件。

3.less自动生成为css文件后，不能直接修改生成的css文件，因为less文件的编译是时时的，刷新保存后，修改的css文件就不存在了。

3.less的嵌套

1.less的嵌套与HTML的结构一一对应。

//less
.father {
    .son {
        .sun {
            font-size: 20px;
        }
    }

    .borther {
        color: #09f;
    }
}

//less自动生成的css
.father .son .sun {
  font-size: 20px;
}
.father .borther {
  color: #09f;
}

//html
    <div class="father">
        父亲
        <div class="son">
            儿子
            <div class="sun">孙子</div>
        </div>
        <div class="borther">
            兄弟
        </div>

2.&代表less里的父元素自身。

3.父元素的内层选择中如果没有&符号，就是它的后代；有&符号，就是父元素自身。

// less中的嵌套与HTML结构一致
.father {
    // 子代
    >.son {
        font-size: 50px;

        //伪元素
        &::before {
            content: "哈哈";
        }

        .sun {
            color: green;
            font-size: 16px;

            // 鼠标经过
            // &代表的是less中的上一级元素
            &:hover {
                color: #09f;
            }
        }
    }
}


// 交集
// &代表的是less中的上一级元素
div {
    &.borther {
        background-color: #f34;
    }
}

4.less的变量

用@定义，谁要用谁就调用。

//定义变量
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;

.father {
    width: @width;

    .son {
        color: @color_f34;

        .sun {
            color: @