less 常用高阶语法

定义变量

@mainColor: red;

普通使用变量

#header {
  color: @mainColor;
}

vue中全局定义变量

开发环境中安装两个插件 style-resources-loader vue-cli-plugin-style-resources-loader

然后 vue.config.js 配置一下 然后就可以全局使用 @mainColor 这个变量了

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局变量路径，不能使用路径别名
        resolve('src/styles/base-data.less')
      ]
    }
  }
}

在字符串中嵌入变量 或用变量定义类名或者属性名

"@{num}px" @{}

@images: "../img";
@class: num;
@ll: color;
// 定义类名或属性名
.@{num} {
    @{color}: red;
    backgroud-@{color}: red;
}
// 字符串使用
body {
  background: url("@{images}/white-sand.png");
}

对语法不进行转义处理 ~"anything"

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

混入作为函数使用

.name(@name, @size) {
  .@{name} {
     font-size: "@{size}px";
  }
}
.name(kkk, 45);
// .kkk: { font-size: 45px; }
.average(@x, @y) {
  @result: ((@x + @y) / 2);
}
div {
  // [] 获取其内部定义的值
  padding: .average(16px, 50px)[@result];
}

// div { padding: 33px; }

循环判断 when

只有当其为真才会执行 可以配合混入 函数 递归 来实现循环操作

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));
  width: (10px * @counter);
}

div {
  .loop(5);
}