vue 中 style 标签中的 scoped 属性（作用域）和 lang 属性的介绍

Posted 2022-09-09 知其黑、受其白

阅读目录

1、 什么是 CSS 预处理器

CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。

---

2、lang
因此 lang 的属性可选：scss（sass）、less 等等。

---

3、scss 和 sass 的区别

scss 是 sass 的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。

注明：使用这个lang的属性需要安装scss（sass）

---

4、scoped属性

scoped 是指定样式的局部作用域。

在 vue 中：

App.vue 相当于根容器，不设置 scoped。
所以一般在App.vue中引用公共样式。
而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。
不作用于其它.vue页面。