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

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页面。

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

1

2 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 3 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 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

以上是独立装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标签

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

    以上就是本篇文章【vue：style标签中的scoped属性（作用域）和lang属性的介绍】的全部内容了，欢迎阅览 ！ 文章地址：http://sicmodule.glev.cn/quote/9309.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 歌乐夫资讯移动站 http://sicmodule.glev.cn/mobile/ , 查看更多