关键特性说明
-
原生CSS:
-
浏览器原生支持,无需额外处理
-
缺少编程特性(变量、嵌套、混合等)
-
-
Less:
-
使用JavaScript实现
-
支持变量、混合、函数等
-
在客户端或服务器端编译
-
-
SCSS:
-
Sass的CSS兼容语法
-
使用大括号和分号
-
完全兼容CSS语法
-
-
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
.button
color: $primary
</style>
<!-- Less -->
<style lang="less">
@primary: #333;
.button { color: @primary; }
</style>