less预处理+rem 移动端适配（第一部分）

前端六和四

已于 2022-05-19 11:32:15 修改

阅读量304

点赞数 1

文章标签： less vscode css javascript

于 2022-05-16 21:59:54 首次发布

本文链接：https://blog.csdn.net/m0_66156767/article/details/124806589

版权

本文介绍了less预处理器的基本概念，包括其作为CSS增强版的特点，如选择器嵌套、运算、变量和导入导出机制。还详细讲解了如何在VSCode中安装和配置less插件，以及如何修改less编译后的CSS文件路径，以实现更高效的工作流程。

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

less是什么？

说通俗简单点 less 是 css 的升级版，在 css 原有的基础上添加了一些运算与逻辑，文件后缀为 .less ，css 有的他都有，写法也是完全兼容，只是在各种选择器与注释方面有些创新。

安装 less

想要使用 less 先在vscode里安装 easy less 插件，如下图：

没有作用的可以重启 vscode 再试试

less的使用方法

安装好后可以在工作区创建后缀为 .less 的文件，下面介绍 less 的一些使用方法和特点(以下的代码都是写在 .less 文件里才有效)。

less 选择器的创新

选择器可以直接嵌套在父级内部并且可以一直嵌套下去，写完后也方便隐藏，在有创新的同时 css 原有的写法一样是可以的，具体代码如下：

// 后代选择器
.father {
    .son {
        color: aquamarine;
    }

    // 兄弟关系
    .son1 {
        color: bisque;
    }
}

// 交集选择器
.father.father1 {
    color: turquoise;
}

// 并集选择器
.father,
.father1 {
    color: blue;
}

// 子代选择器
.father {

    // & 表示为当前元素，也就是.fa