less与sass关键点对比

研究背景

你知道为何大部分组件库都使用less而不是sass吗？请带着这个问题去看接下来的内容。在大部分其余研究less与sass一同文章中，都只是介绍编译环境、变量符、脚本语法、产出格式等区别。而其对组件库建设起关键做用的几个特性没有介绍。

变量覆盖规则不一样

（1）less

<template>
  <div>
    <h2 class="box">box</h2>
    <h2 class="box2">box2</h2>
  </div>
</template>

<script>

</script>
<style lang="less" scoped>
@color1: red;
@color2: @color1;
@color1: blue;

.box {
  color: @color2; // blue
}

.box2 {
  @color1: green;
  color: @color2; // green
}
</style>

（2）sass

<template>
  <div>
    <h2 class="box">box</h2>
    <h2 class="box2">box2</h2>
  </div>
</template>

<script>

</script>
<style lang="scss" scoped>
$color1: red;
$color2: $color1;
$color1: blue;

.box {
  color: $color2; // red
}

.box2 {
  $color1: green;
  color: $color2; // red
}
</style>

你能看出其中的差别吗？

less modifyVars