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

叁歲伎倆 2022-09-02 04:15 203阅读 0赞

**1、 什么是CSS预处理器**  
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。  
**2、lang**  
因此lang的属性可选：scss（sass）、less等等  
即：<style lang="scss">  
**3、scss和sass的区别**  
scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。  
注明：使用这个lang的属性需要安装scss（sass）  
**4、scoped属性**  
scoped是指定样式的局部作用域。  
在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。

## Vue中的style 的lang=" "和scpoed ##

**普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性**

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

1 <style lang="scss" scoped>
    2 /* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
    3 // 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
    4 body {
    5   div {
    6     font-style: italic;
    7   }
    8 }
    9 </style>

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

## [SASS和SCSS标签详解与scoped局部和全局的使用][SASS_SCSS_scoped] ##

### 首先，学会使用sass： ###

1.先下载和安装node-sass和一些加载器

`$ cnpm install sass-loader node-sass vue-style-loader --D`

2.配置webpake加载器:webpack.base.config.js //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass!

`{ test: /\.scss$/, loaders: ["style", "css", "sass"] }`

3.在需要用到sass的地方添加lang=scss

`<style lang="scss" scoped> 。。。。。。。 <style>`

--------------------

以上是独立装sass的过程，一般项目在构建的时候会在package.json里面提前引入了node-sass和加载器，webpack也默认配置了加载器，具体参考项目里面的配置。

### sass和scss ###

> 注意：sass和scss是两个不同的东西！只是相似！sass借鉴了ruby语言的规范很严格！代码里面也没有大括号！这对于习惯用css\{\}的前端人员很难适应！于是就出现了scss!完美兼容css!还能有sass的功能！ 如果用的是webpack-simple模版用sass的话就是lang="sass",sass是没有\{\}括号的，如果有\{\}会抱错。 webpack模版的话就是用lang="scss"

--------------------

以下是关于sass的引入和使用，下面讨论一些关于sass在项目里面如何结构化，和模块化的使用：

1：分散式（参考大部分的后台系统） 分散式是vue官网推荐的一种方式，就是每个模块是一个独立的.vue文件，里面包含template模版，js，css，这三种都用标签封装起来，成为一个vue实例，实例解析的时候逐步解析每个标签的内容，所以这个vue文件里面的sass是局部的，只有这个实例界面生效，一般在标签上面加scoped来局部化，去掉scoped就会变成全局样式。

【好处：】每个vue界面样式独立开发，互不影响，定位问题和改界面样式的话都比较方便，好找

【弊端：】界面被scoped局部化之后，不能覆盖界面里面的子组件样式，因为样式只对当前界面生效。（可以加/deep/解决）

【公共样式和变量：】公共样式和公共变量一般定义在外面，每个界面要用的时候都需要引入（import）

2：集中式（参考大部分的前台系统） 集中就是把所有模块的样式都抽离出来做独立的.scss文件，每个模块里面不写scss标签，写一个公共的scss文件(app.scss)把所有模块的样式按照顺序都引入一遍（先引公共变量，在引公共样式，最后引入每个模块），最后在app.vue里面或者main.js主入口里面import app.scss。最后界面就一个style标签

【好处：】所有样式集中管理，样式之间可以互相覆盖，可以随意覆盖子组件样式，公共变量和公共样式可以随意使用。

【弊端：】所有模块都需要独立的样式文件，导致样式文件过多不好管理，互相覆盖容易产生bug（为了不互相覆盖，每个样式都需要写在 父样式的嵌套里面，引入的时候也需要注意顺序），

【公共样式和变量：】公共样式和公共属性会在引入根样式文件（app.scss）里面第一个引入，这样后面引入的样式就可以随意使用。

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20220829/189948fea9cb40cb8c737edec2619e53.png
[SASS_SCSS_scoped]: https://www.cnblogs.com/both-eyes/p/10047352.html