0

所以我想我刚刚开始了解更少和引导。我正在构建一个响应式主题，我遇到的一个问题是我有一个带有 1px 边框的跨度，这个 1px 边框自然会增加宽度并把整个东西扔掉，当然我可以在跨度上打另一个类来覆盖width:300 设置并将其设为 299，但是因为它是一个响应式主题，所以我必须为各种屏幕宽度编写几个类。

我只是尝试将 mixin 写入 less 引导程序并成功编译它，但是 mixin 似乎没有作为一个类出现 - 它不在编译的 CSS 文件中。这是 mixin.less 文件中的代码 - 我的添加在“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 边框不会引起任何问题）。

4

1 回答 1

0

.spanBorder 是一个“函数”，您还必须对它进行.spanBorderX调用：.spanBorderX (@gridColumns);

请参阅 .core 的完整代码（默认网格）：

  .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 您现在可以使用：

  <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 等也可以。

于 2013-05-23T11:59:04.160 回答