sass、less中的scoped属性
时间:2019-09-30
本文章向大家介绍sass、less中的scoped属性,主要包括sass、less中的scoped属性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、scoped 的实现原理
Vue、Less 中的 scoped 属性的效果主要是通过 PostCss 实现的。代码示例:
//编译前 <template> <div class="example">scoped测试案例</div> </template> <style scoped lang="less"> .example{ color:red; } </style> //编译后 <template> <div class="example" data-v-5558831a>scoped测试案例</div> </template> .example[data-v-5558831a] { color: red; }
PostCSS 给一个组件中的所有 dom 添加了一个独一无二的动态属性(比如上面的data-v-5558831a),给 css 选择器额外添加一个对应的属性选择器来选择组件中的 dom ,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
可以总结,scoped 的渲染规则:
- 给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素
- 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式
2、scoped穿透
scoped在Vue项目中,当我们引入第三方组件库时,需要在局部组件中修改第三方组件库的样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
stylus的样式穿透 使用>>>来进行穿透
外层 >>> 第三方组件
样式
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
sass 和 less 的样式穿透使用 /deep/
外层 /deep/ 第三方组件 { 样式 } .wrapper /deep/ .swiper-pagination-bullet-active{ background: #fff; }
可以参考:https://segmentfault.com/a/1190000015932467
3、scoped使用中的问题
在 style 标签里添加 scoped 属性代表着 style 标签里的样式只会作用于该组件而不会作用于其他组件中,但其他公共样式仍会对该组件起作用。比如父子组件中,在父组件中添加了 scoped 属性,此时父组件中的样式并不会作用于子组件。
有个现象比较奇怪,在父组件中没有 scoped 属性,子组件中有,此时如果从父组件中打开子组件,父组件中设置的样式会对子组件起作用,但是如果直接跳转打开子组件页面的话,此时父组件中的样式就不会对子组件起作用了。所以我们在组件中设置样式应该尽量都添加 scoped 属性。
原文地址:https://www.cnblogs.com/wenxuehai/p/11611960.html
- PhEmail:基于Python的开源网络钓鱼测试工具
- 数据库中间件mysql-proxy细节【mysql官方的中间件】
- Office CVE-2017-8570远程代码执行漏洞复现
- Java 并发包中的读写锁及其实现分析
- 深入理解 Spring 事务原理
- Chrome开发者工具的小技巧
- Java Web中JSP中6种动作概况知识点总结——每日一语法学习
- 从Flash到Silverlight进阶教程-用代码来创建动画
- 从Flash到Silverlight进阶教程-Tweener
- silverlight设置浏览器Cookies
- 一个最基本的布局控件-panel
- silverlight项目小结
- oozie 运行demo
- sqoop 兼容性问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android倒计时神器(CountDownTimer)
- Kotlin如何安全访问lateinit变量的实现
- Android实现加载对话框
- Android RecyclerView实现悬浮吸顶、分隔线、到底提示效果
- Android监听键盘状态获取键盘高度的实现方法
- android实现小音频频繁播放
- 每日一个知识点:什么时候会触发Full GC
- 拥抱kotlin之如何习惯使用kotlin高阶函数
- Android中调用另一个Activity并返回结果(选择头像功能为例)
- Android 自定义缩短Toast显示时间的实例代码
- Android Presentation实现双屏异显
- Android中点击按钮启动另一个Activity及Activity之间传值问题
- Android中使用SeekBar拖动条实现改变图片透明度(代码实现)
- Android实现原生锁屏页面音乐控制
- android实现简单音乐播放器