我如何使这个css规则工作

Question

我刚刚写了一个引导栏页面，但我的一个类不工作:

.serviceDetails {
  .height {
    line-height: 12px;
    margin-top: 8px;
  }
  p.text , span.text {
    font-size:11px;
  }
  .icon {
    border:11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

这是我的html:

    <section class="serviceDetails">
        <div class="row">
        <div class="col-md-3 col-xs-12">
                    <div class="col-md-2 hidden-xs icon">
                     <i class="fa fa-bandcamp" aria-hidden="true"></i>
        </div>
....

由于某些原因。icon类不工作?更多信息在这里:codepen

Answer 1

把你的css放到嵌套之外就可以了，

 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

http://codepen.io/anon/pen/dOYgaV

edit:为边框添加颜色和填充，同时更改了codependency的预处理设置。

.serviceDetails {
  .height {
    line-height: 12px;
    margin-top: 8px;
  }
  p.text , span.text {
    font-size:11px;
  }
 .icon {
    border: solid pink 11px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

预编译上面写的sass也可以解决问题，http://www.sassmeister.com/-在线编译器http://sass-lang.com/- sass文档

这是因为普通的css不允许在类中嵌套类规则，而sass支持嵌套和许多其他很酷的功能。