欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Less插件的用法

程序员文章站 2022-07-03 12:35:49
...

Less插件的用法

小白笔记,大佬轻喷

只有在网页和小程序开发中如何使用Less使CSS/WXSS编写更简单

一、使用前准备

  1. 编辑器 VS Code

  2. 相关插件 Easy LESS 或 Easy WXLESS
    Less插件的用法
    Less插件的用法

二、相关配置

  1. 使用Easy LESS插件编写CSS,不需要进行配置;

  2. 使用Easy LESS插件编写WXSS,需进行如下配置

    • 打开设置
      Less插件的用法

    • 输入下列语句
      Less插件的用法

      "less.compile": {
          "outExt": ".wxss"
        },
      
    • 保存(Ctrl + S)

  3. 使用Easy WXLESS插件编写WXSS,不需要进行配置;

三、使用方法(使用WXSS演示)

  • 按照Less的语法进行编写,保存时会在相同目录下生成相应的CSS或WXSS文件

  • Less语法基本和CSS相同

  • 最大特点是能够进行嵌套,按照页面的业务逻辑逐层渲染,简化操作

  • 这是用Less
    Less插件的用法

  • 这是生成的相应的WXSS
    Less插件的用法
    可以看到同样的渲染,使用Less会比Wxss更简洁和方便


相关链接
相关标签: CSS/WXSS less