Easy LESS的基础使用

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

---

前言

Easy LESS的优点主要体现在以下几个方面：

1. 语法高亮：它提供了Less样式文件的语法高亮功能，这使得在编写Less代码时能够更清晰地区分不同的语法元素，从而提高编码效率和准确性。
2. 快速预览：使用Easy LESS可以在VSCode中快速预览生成的CSS文件，这样可以即时查看Less代码转换后的效果，而无需手动编译。
3. 简化计算：Less作为一种CSS预处理器，它允许在样式表中直接进行计算，这样可以减少手动计算的繁琐过程，使得CSS逻辑更加清晰。
4. 集成于开发工具：Easy LESS可以作为插件集成在常用的开发工具中，如VSCode，这样开发者可以在熟悉的环境下进行工作，无需切换到其他专门的编译环境中去。
5. 配置文件简单：通过简单的配置，即可在开发工具中设置Easy LESS的相关选项，使得个性化设置变得容易。
6. 支持npm脚本：Easy LESS支持在VSCode中管理和运行npm脚本，这对于依赖Node.js环境的开发者来说是一个便利的功能。
7. 兼容性：由于Less是广泛使用的CSS预处理器之一，因此它的兼容性较好，可以与多种前端工具链无缝配合。
8. 社区支持：Less拥有一个活跃的社区，提供了大量的资源和库，这些可以帮助开发者更好地使用Less及其相关工具。

Easy LESS作为一个Less插件，为开发者提供了便捷的Less编译和预览功能，使得CSS的编写和管理变得更加高效和直观。

---

Easy LESS 是一个用于将 LESS 编译成 CSS 的简单工具。要使用 Easy LESS，请按照以下步骤操作：

1. 首先，确保已经安装了 Node.js。如果没有安装，请访问 Node.js 官网 下载并安装。

2. 打开命令提示符（Windows）或终端（Mac/Linux），输入以下命令安装 Easy LESS：

npm install -g easyless

1. 安装完成后，可以使用以下命令将 LESS 文件编译成 CSS 文件：

easyless input.less output.css

其中，input.less 是你要编译的 LESS 文件，output.css 是生成的 CSS 文件。如果需要实时预览，可以使用以下命令：

easyless --watch input.less output.css

这样，每当 input.less 文件发生变化时，output.css 文件会自动更新。

---

 

vscode安装插件Easy LESS，用于实现编写less文件后生成css或者wxss文件

---

配置步骤：

 在配置文件末尾或者其他位置加入以下代码

 // Easy LESS配置
    "less.compile": {
        "compress": false,//是否压缩
        "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
        "out": true, // 是否输出css文件，false为不输出，千万不要是false
        "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss'
        // "outExt": ".css", // 输出文件的后缀,小程序可以写'.wxss'
    }

---

然后，就可以在文件中编写less文件，快速的写css样式了

但是我没找到自动保存的同时让less自动生成wxss的方法，希望有大佬能在评论区说下~ 

---

同时，less本身就支持import功能

生成的wxss文件中：

---

less中对使用first/last-child选择器

ul{
    li{
    //设置第一个li元素的margin-left
      &:first-child{
        margin-left: 0px;
      }
    //设置最后一个li元素的margin-left
      &:nth-last-child(1){
        margin-left: 5px;
      }
    }
  }

通过使用 &: 来选择自身