使用更少的mixins扩展Twitter的Bootstrap 2.x默认网格(跨度类) [英] Extending Twitter's Bootstrap 2.x default grid (span classes) with less mixins

问题描述

所以，我想我才刚刚开始了解不足和重新启动.我正在建立一个响应式主题，我遇到的问题之一是我的跨度带有1px边框，这个1px边框自然会增加宽度并丢弃整个内容，当然我可以在跨度上拍另一个类以覆盖width:300设置并将其设置为299，但是因为它是响应式主题，所以我必须针对各种屏幕宽度编写几个类.

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.

我只是尝试将mixin写入较少的引导程序并成功编译，但是mixin似乎没有显示为类-它不在编译CSS文件中.这是mixin.less文件中的代码-我的添加内容在"Wedit"下面:

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

我假设也许我不得不在另一个文件或其他文件中调用.spanBorder，但不知道我在哪里或是否正确.等式的目的是简单地从原始宽度变成1px(这样1px的边框不会引起任何问题).

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).

推荐答案

.spanBorder是一个函数"，您还必须使用.spanBorderX和对此的调用:.spanBorderX (@gridColumns);

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

请参阅.core(默认网格)的完整代码:

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);

  }

在重新编译后，将此代码添加到mixins.less中，您现在可以使用:

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>

当然，spanBorder1，spanBorder2等也可以使用.

Of course spanBorder1, spanBorder2, etc will also work.

这篇关于使用更少的mixins扩展Twitter的Bootstrap 2.x默认网格(跨度类)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！