CSS 难点攻克

八月 02, 2024 1168

汇聚各个时间段，关于 CSS 的一些难点问题，他们掌握之后又很容易忘记，全部汇总在这里

SCSS 重复利用

有如下 Html：

1
2
3
<div class="van-cell-group van-cell-group--inset">

</div>

这是 vant 库组件的类，已经绑定样式，现在需要重写组件的 margin，如下：

1
2
3
4
5
6
7
8
9
.van-cell-group {
  &--inset {
    margin: 0 10px;
  }
}
// 编译生成
.van-cell-group--inset {
  margin: 0 10px;
}

但是无法覆盖 vant 组件原有样式，由于加载顺序原因，组件默认样式优先。于是修改如下：

1
2
3
4
5
6
7
8
9
10
11

.van-cell-group {
  &--inset.van-cell-group {
    margin: 0 10px;
  }
}
// 编译生成
.van-cell-group--inset.van-cell-group {
  margin: 0 10px;
}

这样就成功替换了组件默认样式，但是其中的 .van-cell-group 还是写了两次，导致重复，询问AI可以优化如下

1
2
3
4
5
6
7
8
9
.van-cell-group {
    &--inset#{&} {
      margin: 0 10px;
    }
}
// 编译生成
.van-cell-group--inset.van-cell-group {
  margin: 0 10px;
}

最终效果

1
2
3
4
5
6
<div class="van-cell-group__title van-cell-group__title--inset">

</div>
<div class="van-cell-group van-cell-group--inset">

</div>
1
2
3
4
5
6
7
8
9
10
11
.van-cell-group {
    &--inset#{&} {
      margin: 0 10px;
    }
    &__title {
      &--inset#{&} {
        margin: 0 10px;
      }
    }
}