Question

我有一个像这样的SASS文件：

.fancy_div {
  background-color: #CCC;
  border: 3px solid blue;
  .pretty_text {
    font-size: 8px;
    font-style: italic; 
  }
}

然后我有另一个SASS文件，我想用pretty_text选择器做类似的事情。

.lame_div {
  background-color: purple;
  border: 3px solid green;
  .ugly_text {
    @extend .pretty_text;
    font-color: #ffd700;
    font-style: bold;
  }
}

我的目标是让.ugly_text像.pretty_text一样除了金色和粗体（显然这都是假的，但你明白我的观点）。

当然，如果我改变第一个的范围，它将起作用：

.pretty_text {
  font-size: 8px;
  font-style: italic; 
}
.fancy_div {
  background-color: #CCC;
  border: 3px solid blue;
}

然而，由于几个原因，这不是一个可行的解决方案。

有没有办法在另一个范围内扩展一个类？即使它是黑客。

Answer 1

我将假设你不能只修改你扩展的代码的原因是因为它是另一个库的一部分。然而，答案是否定的。您唯一的选择是修改原件（可能会提交您正在使用的项目的补丁吗？）。

%pretty_text {
    font-size: 8px;
    font-style: italic; 
}

.fancy_div {
    background-color: #CCC;
    border: 3px solid blue;
    .pretty_text {
        @extend %pretty_text;
    }
}

.lame_div {
    background-color: purple;
    border: 3px solid green;
    .ugly_text {
        @extend %pretty_text;
        font-color: #ffd700;
        font-style: bold;
    }
}

SASS扩展到另一个类的范围内

1 个答案: