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
.button
  color: $primary
</style>

<!-- Less -->
<style lang="less">
@primary: #333;
.button { color: @primary; }
</style>
相关推荐
菜鸟una19 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
代码改变世界1008620 小时前
像素策略游戏:资源战争
css·游戏·css3
luckyPian1 天前
前端+AI:CSS3(二)
前端·css·css3
muyouking111 天前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
fruge2 天前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
znhy@1232 天前
CSS易忘属性
前端·css
软件技术NINI2 天前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
小肚肚肚肚肚哦2 天前
CSS 伪类函数 :where 简介
前端·css
小肚肚肚肚肚哦2 天前
伪元素与普通元素的层级关系问题浅析
前端·css
~无忧花开~2 天前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画