什么是less？

原创已于 2023-10-04 18:11:39 修改 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #前端 #css

于 2023-10-02 19:42:01 首次发布

本文介绍了如何在Vue项目中使用LessCSS预处理语言，包括安装less和less-loader插件，配置vite.config.js以启用less支持，并展示了一个简单的less样例。

less是一门css的预处理语言，它扩展了css，增加了很多特性，比如less增加了变量，嵌套，伪类，伪元素上的使用，方便了css的编写。如果要详细学习less的使用，可以进入less的官网进行深度学习https://less.bootcss.com/

在vue项目中如何使用less？

安装插件

npm install less
npm install less-loader

然后在 vite.config.js中配置

css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
  },

最后直接使用

<style lang="less" scoped>
.demo-pagination-block {
  position: fixed;
  bottom: 180px;
  right: 50px;
  .home{
    background-color: pink;
  }
}
</style>