初学less的总结

less 使用前准备步骤

1. 首先使用 npm 下载依赖
   npm install --save less less-loader
2. 在配置文件 webpack.dev.conf.js 中配置(若通过 vue-cli 来构建项目，这一步是可以省略的)

module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
}

3. 两种引用方法

• 在 vue 文件中的 style 标签中添加 lang="less"即可在标签中使用 less
  <style lang="less"></style>
• 外部引入 less
  <style lang="less">@import "../../index.less"</style>

如何使用 less

1. 定义变量及嵌套使用

• 定义方式：@k:v; 使用方式：@k;

<div class="hello">
    <span>hello world</span>
</div>
<style scoped lang="less">
@bg: #1457b2;
@k: 100px;
.hello {
  background: @bg;
  width: @k;
  height: @k;
  span {
    font-size: @k / 5;
  }
}
</style>

2. 字符串与变量的拼接

• 字符串与变量拼接需要使用@{}

<div>
    <div class="circle1"></div>
</div>
<style scoped lang="less">
@img: "../../assets/";
@k:30px;
.circle1 {
  width: @k;
  height: @k;
  background-image: url("@{img}1.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

3. 定义函数

• 调用函数时可选择性传参，不传参则会使用默认值

<div>
    <div class="one">
      <span>one</span>
    </div>
    <div class="two">
      <span>two</span>
    </div>
</div>
<style scoped lang="less">
//定义函数
.change(@bg:pink,@k:100px,@size:14px) {
  background: @bg;
  width: @k;
  height: @k / 2;
  span {
    font-size: @size;
  }
}
//不传参调用函数（使用默认值）
.one {
  .change();
}
//传参调用函数
.two {
  .change(@bg:red, @k:300px, @size:24px);
}
</style>

4. 运算符

• +、-、*、/

<div>
    <div class="one">
      <span>one</span>
    </div>
    <div class="two">
      <span>two</span>
    </div>
  </div>
  <style scoped lang="less">
@k: 100px;
.one {
  width: @k;
  height: @k;
  background-color: aquamarine;
}
.two {
  width: @k+ @k;
  height: @k+20px;
  background-color: pink;
}
</style>

5. Mixins(混合)

• Mixins 其实就是定义一组属性在其他规则集中使用

注意：此处定义时需要添加.

<div>
    <div class="one">
      <span>one</span>
    </div>
    <div class="two">
      <span>two</span>
    </div>
</div>
<style scoped lang="less">
@k: 100px;
.bordered {
  border-bottom: solid 2px black;
}
.one {
  width: @k;
  height: @k;
  background-color: aquamarine;
  .bordered;
}
.two {
  margin-top: 20px;
  width: @k+ @k;
  height: @k+20px;
  background-color: pink;
  .bordered;
}
</style>

less 全局变量的配置

• 全局变量配置可使用 globalVars 或者 modifyVars

注意两者区别是：

• global-var 会将所传入的参数写入所有的 less 文件的顶部，我们可以在自己的 less 文件中重写这些参数的值
• modify-var 会将所传入的参数写入所有 less 文件的底部，我们自己定义的变量会被覆盖

写在最后

• 全局变量暂时还没有试验过，后期试过之后再次编辑