0

I am using Bootstrap with LESS and would like to 'hide' the BS classes behind my own, more semantic ones.

So for example, if I wanted to display <li> elements as BS panels, my LESS might have something like this: 

 ul.main-item-list {

     list-style:none;
     margin:0;
     padding:0;

     > li {
         .panel;
         .panel-default;
         margin:40px 0;

         > .item-heading {
             .panel-heading;
         }

         > .item-body {
             .panel-body;
         }

         > .item-footer {
             .panel-footer;
         }
     }
 }

That applies each style rule individually.

But (obviously, when you think about it) nested selector rules are not being applied:

.panel-default > .panel-heading {

    // styles normally associated with this rule are not being applied

}

Is it possible to use bootstrap classes as mixins in my own classes, in such a way that nested selector rules still work?

Martin Hansen Lennox
  • 2,837
  • 2
  • 23
  • 64
  • "would like to 'hide' the BS classes behind my own, more semantic ones." - [Don't](https://gist.github.com/seven-phases-max/cefc873a78fa12924462). They are never meant to be used like this. (You'll find certain tips and tricks in the linked discussions, but...). – seven-phases-max Feb 10 '16 at 22:36
  • Ok thanks for the pointers. Not attempting to go down that road has probably saved me hours of pain later on! – Martin Hansen Lennox Feb 10 '16 at 22:43

0 Answers0