Bootstrap mix-ins and Web Essentials issues

Question

Are there known issues with Web Essentials and Bootstrap mix-ins? I am getting incorrect CSS (repeatable -- see my code below).

I am working with the bootstrap.less package and using Web Essentials to compile the less file to css. (VS 2013 + Update 1/Latest web essentials)

So, if I create a simple page like so, everything works: that is, the 2 divs stack horizontally, until my browser window gets too small, then they stack vertically.

<div class="container">
  <!-- this row uses no LESS-->
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <span>Div1</span>
    </div>
    <div class="col-sm-12 col-md-6">
      <span>Div2</span>
    </div>
  </div>
</div>

Now, if I create this little block of LESS

@import (reference) 'bootstrap/bootstrap.less';

.div-container {
    .make-md-column(6);
    .make-sm-column(12);
}

And then change my code like this:

<div class="container">
    <!-- this row uses the bootstap LESS mixin (css compiled with Web Essentials)-->
    <div class="row">
        <div class="div-container">
            <span>Div1</span>
        </div>
        <div class="div-container">
            <span>Div2</span>
        </div>
    </div>
</div>

It stops working -- specifically, the divs stack vertically, even on a medium or large width.

Now, I think that the LESS that I put in is exactly equivalent to the bare classes that I was using in my first snippet.

I think that the problem is that WebEssentials/Visual Studio is not compiling the LESS correctly.

I believe that is the problem, becuase if I look at the generated css, there are no media queries in it, but the bootstrap mixin file (mixins.less to be specific) specifies a media query for hte .make-xx-col mixins.

I'm probably not the first person to hit this, so I must just be doing something wrong. Is there a workaround? Have I mis-configured something? Is there some other LESS compilation solution that I should use instead of Web Essentials?

score 0 · Answer 1 · answered Feb 14 '14 at 17:29

0

Reorder the mixins so the compiled css output doesn't override the selectors with larger min widths.

Less:

.div-container {
    .make-sm-column(12);
    .make-md-column(6);
}

CSS:

.div-container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}

answered Feb 14 '14 at 17:29

lesser

1

Yah -- that's what they told me on the bootstrap home site as well, but it doesn't work. I copy-pasted your less above, saved (in VS) and let Web Essentials generate the css. The output had not media queries. The first part (.div-container with position, min height and padding) matched your output exactly. No media queries at all though. – JMarsch Feb 14 '14 at 17:41

score 0 · Answer 2 · answered Jun 20 '14 at 05:33

@import (reference) 'bootstrap/bootstrap.less';

.div-container {
    .make-md-column(6);
    .make-sm-column(12);
}

I think this is a simple file import problem..Try Using

 @import  '../../../bootstrap/bootstrap.less';

Or Modify your code using '../../../' .. This is an impotent thing...

Note :-

If you are using Web Essential ..Then you should import the files like this.Otherwise the .Less to .CSS conversion will not work..

@import "../../../content/bootstrap/variables.less";
@import "../../../content/bootstrap/mixins.less";
@import "../../../content/bootstrap/utilities.less";

Bootstrap mix-ins and Web Essentials issues

2 Answers2