Extending Twitter's Bootstrap 2.x default grid (span classes) with less mixins

问题

So I think I'm just starting to understand less and bootstrap. I am building a responsive theme and one of the issues I have is I have a span with a 1px border, this 1px border naturally increases the width and throws the whole thing off, of course I could just slap another class on the span to override the width:300 setting and make it 299, however because it's a responsive theme I would have to write several classes for various screen widths.

I just tried writing a mixin into less bootstrap and successfully compiled it, however the mixin does not appear to have showed up as a class - it isn't in the compiles CSS file. Here is the code from the mixin.less file - my addition is below "Wedit":

.offset (@columns) {
  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
}

.span (@columns) {
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

//Wedit
.spanBorder (@columns) {
  width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
}

I am assuming perhaps I have to call .spanBorder in another file or something, but have no idea where or if i'm even right about this. The purpose of the equation is to simply take 1px from whatever the original width would be (so the 1px border does not cause any issues).

回答1:

.spanBorder is a 'function' you also have to great a .spanBorderX and a call to this: .spanBorderX (@gridColumns);

See the complet code for .core (the default grid):

  .core (@gridColumnWidth, @gridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .spanBorderX (@index) when (@index > 0) {
      .spanBorder@{index} { .spanBorder(@index); }
      .spanBorderX(@index - 1);
    }
    .spanBorderX (0) {}


    .offsetX (@index) when (@index > 0) {
      .offset@{index} { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .spanBorder (@columns) {
     width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
     }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    [class*="span"] {
      float: left;
      min-height: 1px; // prevent collapsing columns
      margin-left: @gridGutterWidth;
    }

    // Set the container width, and override it for fixed navbars in media queries
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container { .span(@gridColumns); }

    // generate .spanX, .spanBorderX and .offsetX
    .spanX (@gridColumns);
    .spanBorderX  (@gridColumns);
    .offsetX (@gridColumns);

  }

add this code to mixins.less after recompiling you could use now:

  <div class="row"><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div></div>

Of course spanBorder1, spanBorder2, etc will also work.

来源：https://stackoverflow.com/questions/16703684/extending-twitters-bootstrap-2-x-default-grid-span-classes-with-less-mixins

标签

css

twitter-bootstrap

less

mixins