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