理想的样式解决方案,期待达到以下目的:
-
样式方便复用
-
能轻易避免冲突,样式冲突往往难以定位
-
开发体验好,使用 scss 、less 等预处理,能提高开发效率和体验
-
方便修改样式
-
其他,比如兼容 css,降低学习成本
今天看看 vue 的样式解决方案,能否满足以上要求。
scoped 样式
style
标签上添加 scoped
标志,可以把样式作用范围限制在组件内,即组件内部的样式不会影响外部的样式。
原理:组件编译时给标签添加 data-v-xxx
属性,选择器附带该属性。
deep 样式
vue 提供了特殊的 :deep
选择器,可将父组件的样式作用到子组件内部。
v-deep
已经废弃。
将 vue component 转为 web component,deep 样式不生效。
slot 样式
在组件内部编写 slot 的样式
/* slot 里包含选择器 selector */
:slotted(selector) {
color: blue;
}
全局样式
- 引入多个 style,没有 scoped 的样式块,全局生效。
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
:global
– 希望单条规则全局生效
:global(.yellow) {
color: yellow;
}
v-bind 绑定动态属性
.progress-bar>div {
background-color: #000;
width: v-bind('props.progress');
/* props.progress 是 props 属性*/
height: 8px;
border-radius: 10px;
transition-property: width;
transition-duration: 150ms;
}
style module
<template>
<div>
<p :class="$style.red">This should be red</p>
<h3>HelloWorld</h3>
</div>
</template>
<style module>
.red {
color: red;
}
</style>
style module 能很好做到样式隔离,原理:重写选择器,使其全局唯一。
感觉在模板语法中用 style module,不如 scoped 好,更加适合 JSX。