有没有办法将样式添加到任何子类的 :after 特定父类的选择器？

Question

这些项目是 .pane-content .meta-wrapper 的孩子，但我真的只是在学习 sass，我无法通过向班级的所有孩子添加通用样式设置来找出是否有更简单的方法@ 987654324@ 使用 :after 选择器。我已经看到并尝试了与此 treehouse 教程中的定位子元素有关的示例，但无济于事。

有没有办法定义一次使用的通用样式，然后将变量content: ""; 样式应用于每个类？

.pane-content {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  .field-booth:after {
    @include budicon();
    content: '\e8c7';
    font-size: 25px;
    color: $green;
  }
  .field-website:after {
    @include budicon();
    content: '\ea59';
    font-size: 25px;
    color: $green;
  }
  .field-locations:after{
    @include  budicon();
    content: '\e9b8';
    font-size: 25px;
    color: $green;
  }
  .date-range:after{
    @include  budicon();
    content: '\e99d';
    font-size: 25px;
    color: $green;
  }
  p {
    margin: 0;
  }
}

Answer 1

我可以像这样简化你的代码（使用占位符）：

%childern{
  font-size: 25px;
  color: $green; 
}

.pane-content {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;

  .field-booth:after {
    @include budicon();
    @extend %childern;
    content: '\e8c7';    
  }
  .field-website:after {
    @include budicon();
    @extend %childern;
    content: '\ea59';
  }
  .field-locations:after{
    @include  budicon();
    @extend %childern;
    content: '\e9b8';
  }
  .date-range:after{
    @include  budicon();
    @extend %childern;
    content: '\e99d';
  }
  p {
    margin: 0;
  }
}

Answer 2

使用& 有效地告诉 Sass 将整个父选择器拉入内部并预先添加您将要使用的 CSS 伪类。例如：

ma​​in.scss

a {
  color: red;
  &:hover {
    color: blue;
  }
}

编译为 ma​​in.css

a {
  color: red;
}
a:hover {
  color: blue;
}

所以我认为您正在寻找的代码类似于：

.pane-content {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;

 .field-booth,
 .field-website,
 .field-locations,
 .date-range {
   &:after {
     @include budicon();
     font-size: 25px;
     color: $green;
   }
 }
 .field-booth:after {
   content: '\e8c7';
 }
 .field-website:after {
   content: '\ea59';
 }
 .field-locations:after{
   content: '\e9b8';
 }
 .date-range:after{
   content: '\e99d';
 }
 p {
   margin: 0;
 }
}