Question

这些项目是.pane-content .meta-wrapper的孩子，但我真的只是学习sass而且我无法通过向所有孩子添加常用样式设置来找出更简单的方法使用.meta-wrapper选择器的类: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

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

<强> main.scss

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

编译为 main.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;
 }
}

Answer 2

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

%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;
  }
}

有没有办法将样式添加到任何子类'：在特定父类的选择器之后？

2 个答案: