了解 Less 与 Sass 的优缺点查看

@import

在标准 CSS 中，@import必须在所有其他类型的规则之前,Less 不在乎你把@import语句放在哪里详情参考 less-import 官方文档

变量

less 定义变量使用@符号

直接使用

mixin

定义几个基础样式 html 中使用：类似上图 class="inline ml8 font-gray" 相同的样式是否可以合并

.dl-text 拥有了 .inline .ml8 .font-gray 和自身的 background-color直接使用 dl-text 即可

在 less 中定义的类都可以通过 mixin 组合生成新的类

也可以通过

这种方式定义出来的 mixin 编译后不会生成 font-color 和 font-red 的类只能被其他类引入使用

到这里我们先试一下如何手动编译less 如果全局安装了 less 可以直接执行 lessc 我没有全局安装所以在项目内执行 npx lessc

已知项目目录如下：

cd 进入 lessTest 目录下执行：

$ npx lessc test1.less test1-res.css

得到 test1-res.css

分别看一下 test1.less 和 test1-res.css

如上图红框所示如果在项目中大量使用 mixin 编译出来的 css 中会出现大量的重复代码我们更希望得到类似如下结果：

希望能把相同的代码合并在一下然后再单独定义差异的代码这就需要 extend

extend

extend 的用法：

编译后查看结果

for

关于 for 我们假设有一种场景需要通过 flex 来自行匹配元素的排布和占比我们写了如下代码：

烦透了如果场景比较复杂需要更多那就废废了

怎么解决？ less 中不支持 for 但是我们可以通过递归解决这个问题

创建递归方法并调用

需要注意 .flex@{len} 实现动态字符串拼接

通过 lessc 编译查看结果如下：

功能实现！ flex7 -> flex1 ? 强迫症一下:

舒坦！！！！

关于 LESS 全局引入问题

写好基础 less 后在 main.js 中引入

在编写其他 less 文件或者在 .vue 文件<style lang=less> 中使用基础 less 中的内容时提示：

此时需要使用 style-resources-loader 配置全局 less 变量

先安装对应插件：

$ npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

然后再 vue.config.js中配置：

const { defineConfig } = require('@vue/cli-service');
const path = require('path');

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 注意路径，不能使用配置中的别名路径（例如：alias 配置下的路径别名）
        path.resolve(__dirname, 'src/assets/less/index.less'),
      ],
    },
  },
});

FUNCTIONS

记录几个常用的：

List Functions

-- extract

@CursList: red, blue, green, yellow;

.cusColor{
    color: extract(@CursList, 2)
}

结果：

 .cusColor {
     color: green;
 }

-- each ( for循环遍历 )

@selectors: blue, green, red;
each(@selectors, {
  .sel-@{value} {
    color: extract(@selectors, @index);
  }
});

结果

.sel-blue { color: blue; } 
.sel-green { color: green; } 
.sel-red { color: red; }

color Functions

-- lighten darken

@color-success: #52C51A;
.comColor{
  background-color: @color-success;
}
.lightenColor {
   background-color: lighten(@color-success, 10%);
}
.darkenColor{
  background-color: darken(@color-success, 10%);
}

结果：

映射（Maps）

组件库按需加载css时不希望定义很多全局属性可使用 Maps

#color(){
  success: #52C51A;
  info:#1990FF;
  warning: #FBAD14;
  error: #F5222E;
}

.color-info{
  background-color: #color[info];
}

.color-warning{
  background-color: #color[warning];
}

.color-error{
  background-color: #color[error];
}

结果：

LESS 笔记