vue3 样式 css、less、scss、sass 的说明

关键特性说明

1. 原生CSS:

   • 浏览器原生支持，无需额外处理

   • 缺少编程特性（变量、嵌套、混合等）

2. Less:

   • 使用JavaScript实现

   • 支持变量、混合、函数等

   • 在客户端或服务器端编译

3. SCSS:

   • Sass的CSS兼容语法

   • 使用大括号和分号

   • 完全兼容CSS语法

4. Sass:

   • 缩进语法（无大括号和分号）

   • 更简洁的语法

   • 与SCSS相同的功能集

在Vue 3中的使用

在Vue单文件组件中，可以通过<style>标签的lang属性指定预处理器：

html

<!-- 原生CSS -->
<style>
.button { color: #333; }
</style><!-- SCSS -->
<style lang="scss">
$primary: #333;
.button { color: $primary; }
</style><!-- Sass -->
<style lang="sass">
$primary: #333
.buttoncolor: $primary
</style><!-- Less -->
<style lang="less">
@primary: #333;
.button { color: @primary; }
</style>