vue:style标签中的scoped属性(作用域)和lang属性的介绍

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属性

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>

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)里面第一个引入,这样后面引入的样式就可以随意使用。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐