bier hier bier hier - 1 month ago 7
CSS Question

How can I get this css rule working?

I just wrote a bootstrap column page but one of my classes does not work:

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


This is my 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>
....


For some reason the .icon class does not work? More info here:codepen

Answer

Taking your css outside of the nesting does what you need,

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

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

edit: added color and fill to border, also changed preprocessor settings on codepen.

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

}

Precompiling the sass written above would also fix the problems, http://www.sassmeister.com/ - online compiler http://sass-lang.com/ - sass documentation

This is due to the fact that normal css doesn't allow you to nest class rules inside of classes where as sass does support nesting and also a lot of other cool features.