CSS高阶用法以及VUE CSS穿透用法

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>

<div class="title" style="--background: red;">
  CSS高阶语法
</div>

VUE CSS穿透用法

• “/deep/”

<style lang="scss" scoped>
.myBox {
  width: 100px;

  /deep/ .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

• “>>>”

<style lang="scss" scoped>
.select {
  width: 100px;

  >>> .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

• “::deep”

<style lang="scss" scoped>
.select {
  width: 100px;

  ::deep .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

• “:v-deep”

<style lang="scss" scoped>
.select {
  width: 100px;

  :v-deep .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

注意

注意：如果vue打包scss编译报错，那就更换css穿透方式，以上四种穿透方法总有一种是符合scss编译。 另外，穿透模式下，不受scoped的限制。