Vue 项目中 Sass 与 Less 的对比

最新推荐文章于 2025-09-12 16:13:25 发布

原创

最新推荐文章于 2025-09-12 16:13:25 发布 · 1.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #sass #less

文章目录

一、核心特性对比

特性	Sass/SCSS	Less
语法扩展	`.scss`(类CSS语法)	类似CSS，更接近原生
变量系统	`$variable`	`@variable`
嵌套规则	支持（含属性嵌套）	支持
Mixin系统	`@mixin` + `@include`	`.mixin()`
函数支持	内置100+数学函数	内置函数较少
模块化	`@use` + `@forward`	`@import`
条件/循环	`@if/@for/@each`	有限支持
社区生态	更庞大（React/Angular主流）	Vue社区较常见
编译速度	Dart Sass 最快	较快

二、Vue 项目集成方案

Sass 配置（推荐）

npm install sass sass-loader@10 -D

<style lang="scss">
$primary: #42b983;
.button {
  background: $primary;
  &:hover {
    @include hover-effect;
  }
}
</style>

Less 配置

npm install less less-loader@7 -D

<style lang="less">
@primary: #42b983;
.button {
  background: @primary;
  &:hover {
    .hover-effect();
  }
}
</style>

三、性能关键指标

维度	Sass (Dart实现)	Less
编译速度	1.5x faster	基准
压缩率	高(优化算法好)	中等
内存占用	较低	较低

四、选型决策矩阵

选择 Sass 当：
- 需要复杂逻辑（循环/条件）
- 使用 UI 库如 Vuetify（基于 Sass）
- 项目规模大需要模块化
```
// Sass高级功能示例
@mixin theme($theme) {
  .#{map-get($theme, name)} {
    color: map-get($theme, color);
  }
}
```

选择 Less 当：

已有 Ant Design Vue 等 Less 技术栈
需要更快编译速度（简单项目）
团队对 Less 更熟悉

// Less简洁示例
.generate-colors(@n, @i: 1) when (@i =< @n) {
  .col-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-colors(@n, (@i + 1));
}

五、Vue 3 最佳实践

Sass Module 方案

<template>
  <div :class="$style.container">
    <button :class="$style.button">Submit</button>
  </div>
</template>

<style module lang="scss">
.container {
  padding: 2rem;
  .button {
    background: $primary-color;
  }
}
</style>