修改CSS类属性创建新复选框样式类遇@extend失效的解决办法

问题背景 #

我有一个用于替换浏览器默认复选框的自定义样式CSS类：

.dialog__description__checkbox>input[type="checkbox"] {
  position: relative;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 0 0.5% 0 0.5%;
  width: 19.23px;
  height: 19.23px;
  color: #162f3f;
  border: 0.75px solid #ffffff;
  border-radius: 2px;
  appearance: none;
  outline: 0;
  cursor: pointer;
  transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);

  &::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: 4px;
    left: 7px;
    width: 4px;
    height: 9px;
    border-style: solid;
    border-color: #162f3f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
  }

  &:checked {
    color: #162f3f;
    border-color: #ffffff;
    background: #ffffff;

    &::before {
      opacity: 1;
    }

    ~label::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
}

需要创建一个仅修改以下属性的新CSS类：

border-color: #09C0D7;
background: #09C0D7;

尝试了以下代码但未生效：

.checkbox__dashboard>input[type="checkbox"] {
@extend .dialog__description__checkbox;
   &:checked {
    color: #162f3f;
    border-color:#09C0D7;
    background:#09C0D7;

    &::before {
      opacity: 1;
    }

    ~label::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
}

原因分析 #

用Sass的@extend扩展.dialog__description__checkbox时，目标选择器是嵌套子选择器（.dialog__description__checkbox>input[type="checkbox"]），@extend无法正确继承这种包含子元素的复杂选择器样式。另外，代码中重复写了:checked里的冗余代码，完全没必要。

可行解决办法 #

方案1：使用Sass占位符（推荐） #

把基础复选框样式抽成Sass占位符，避免选择器冗余，同时方便后续扩展：

%base-checkbox {
  position: relative;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 0 0.5% 0 0.5%;
  width: 19.23px;
  height: 19.23px;
  color: #162f3f;
  border: 0.75px solid #ffffff;
  border-radius: 2px;
  appearance: none;
  outline: 0;
  cursor: pointer;
  transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);

  &::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: 4px;
    left: 7px;
    width: 4px;
    height: 9px;
    border-style: solid;
    border-color: #162f3f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
  }

  &:checked {
    color: #162f3f;
    border-color: #ffffff;
    background: #ffffff;

    &::before {
      opacity: 1;
    }

    ~label::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
}

// 原始复选框类
.dialog__description__checkbox>input[type="checkbox"] {
  @extend %base-checkbox;
}

// 新的仪表盘复选框类
.checkbox__dashboard>input[type="checkbox"] {
  @extend %base-checkbox;

  &:checked {
    border-color: #09C0D7;
    background: #09C0D7;
  }
}

方案2：直接覆盖样式（无需修改基础代码） #

如果不想重构基础样式，直接写权重足够的选择器覆盖目标属性：

// 保留原始的.dialog__description__checkbox样式
.dialog__description__checkbox>input[type="checkbox"] {
  /* 原始样式 */
}

// 新类仅修改需要变更的属性
.checkbox__dashboard>input[type="checkbox"]:checked {
  border-color: #09C0D7;
  background: #09C0D7;
}

提示：如果出现样式不生效，检查选择器权重是否足够。可以通过重复选择器（比如.checkbox__dashboard.checkbox__dashboard>input[type="checkbox"]:checked）提升权重，尽量避免使用!important。

方案3：使用CSS变量（最灵活） #

把可配置的颜色抽成CSS变量，后续修改颜色只需调整变量值，无需重复编写样式：

// 定义基础变量
$checked-border: #ffffff;
$checked-bg: #ffffff;

// 原始复选框类
.dialog__description__checkbox>input[type="checkbox"] {
  position: relative;
  // ... 其他基础样式不变
  &:checked {
    border-color: $checked-border;
    background: $checked-bg;
    // ... 其他checked样式不变
  }
}

// 新的仪表盘复选框类
.checkbox__dashboard>input[type="checkbox"] {
  @extend .dialog__description__checkbox>input[type="checkbox"];
}

.checkbox__dashboard>input[type="checkbox"]:checked {
  border-color: #09C0D7;
  background: #09C0D7;
}

内容的提问来源于stack exchange，提问作者bugsmasher