type
status
date
slug
summary
tags
category
icon
password
概览
在vite中使用less | sass:
在style标签注明:
scoped
scoped
实现组件的私有化,让当前的style
只属于当前模块在
DOM
结构中可以看到,vue
通过在DOM
结构以及css
样式上添加唯一标记:data-v-hash
的方式(这个工作是由 PostCSS 转译实现的),来实现组件样式私有化,不污染全局的作用![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F053bc331-e636-4375-ac61-d606b9f92d41%2Fimage_(6).png?table=block&id=f118a49c-54ef-4489-a161-ae2770458688&t=f118a49c-54ef-4489-a161-ae2770458688)
scoped的渲染原则
- 给HTML的DOM节点加上一个不重复的data属性(形如
data-v-7ba5bd90
)来表示他的唯一性
- 在每句css选择器的末尾(编译后生成的css语句)加上一个当前组件的data属性选择器来私有化样式
- 如果组件内包含其他组件,只会给其他组件的最外层标签上加上当前组件的data属性
案例演示-样式穿透:deep()
修改Element-ui里的
input
样式,发现无法生效![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F115393c5-639a-41a9-a007-d5367ee30b1d%2FUntitled.png?table=block&id=e3714a8f-f4f0-4be2-9ae6-7a722d354a55&t=e3714a8f-f4f0-4be2-9ae6-7a722d354a55)
这是因为我们写了
scoped
,它在进行PostCss
转化的时候,把元素选择器默认放在了最后![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd65dad17-6769-4f07-8001-e313118d3d5e%2FUntitled.png?table=block&id=920c752b-d30e-4895-97a3-2442162b1d1c&t=920c752b-d30e-4895-97a3-2442162b1d1c)
Vue提供了样式穿透
:deep()
,它的作用就是用来改变属性选择器的位置![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc7ce86d0-5de4-4b78-8288-5bbbe79d54ae%2FUntitled.png?table=block&id=97d8163f-0ccd-4d6a-914d-d03ea33ac6cd&t=97d8163f-0ccd-4d6a-914d-d03ea33ac6cd)
BEM架构
BEM
是Block
、Element
、Modifier
的首字母缩写,分为块层、元素层、修饰符层,它是一种css
命名规范。element-ui也是使用的这种架构。命名约定的模式如下:
block
代表更高级别的抽象或组件block_element
代表.block
的后代,用于形成一个完整的.block
整体block--modifier
代表.block
的不同状态或不同版本复刻一个bem架构
全局扩充sass
组件用法
- 作者:衔蝉
- 链接:https://xianchan.ah.cn/article/vue3-11
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章