# CSS高阶用法
<style>
:root {
--size: 100px;
--comCol: #fff;
--align: center;
}
.title {
width: var(--size);
height: var(--size);
background-color: var(--background);
color: var(--comCol);
text-align: var(--align);
line-height: var(--size);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="title" style="--background: red;">
CSS高阶语法
</div>
1
2
3
2
3
# VUE CSS穿透用法
- “/deep/”
<style lang="scss" scoped>
.myBox {
width: 100px;
/deep/ .el-input__inner {
border: 0;
color: #000;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- “>>>”
<style lang="scss" scoped>
.select {
width: 100px;
>>> .el-input__inner {
border: 0;
color: #000;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- “::deep”
<style lang="scss" scoped>
.select {
width: 100px;
::deep .el-input__inner {
border: 0;
color: #000;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- “:v-deep”
<style lang="scss" scoped>
.select {
width: 100px;
:v-deep .el-input__inner {
border: 0;
color: #000;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
注意：如果vue打包scss编译报错，那就更换css穿透方式，以上四种穿透方法总有一种是符合scss编译。 另外，穿透模式下，不受scoped的限制。