less与sass关键点对比

Less与Sass变量覆盖差异

最新推荐文章于 2021-12-28 14:13:25 发布

weixin_30279315

最新推荐文章于 2021-12-28 14:13:25 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaollard/p/10428389.html

本文探讨了Less与Sass在组件库建设中的关键差异，重点分析了两者在变量覆盖规则上的不同。通过实例展示了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>