Question

我正在以这种方式在bootstrap中添加填充10px到div：

HTML：

<div class="span12 padded"></div>

my.less文件：

.padded {padding: @gridGutterWidth/2;}
.span1.padded {width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;}
.span2.padded {width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;}
.span3.padded {width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;}

... all other spans in same way

这没有问题。我正在尝试修改它以使其现在更加通用但无法使其工作：

HTML：

<div class="span12 padded20"></div>

my.less文件：

@padding10 = 10px;
@padding20 = 20px;
@padding30 = 30px;
@padding40 = 40px;

.padded10 {padding: @padding10;}
.padded20 {padding: @padding20;}
.padded30 {padding: @padding30;}
.padded40 {padding: @padding40;}

.span1.padded10 {width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - (@padding10 * 2);}
.span2.padded10 {width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - (@padding10 * 2);}
.span3.padded10 {width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - (@padding10 * 2);}

... same way for all spans and padding types

为什么第二种方式不会向span添加任何填充？

Answer 1

在变量分配中使用:，而不是=。

@padding10: 10px;
@padding20: 20px;
@padding30: 30px;
@padding40: 40px;

通常，您可以使用this compiler检查LESS代码。

Answer 2

由于您使用的较少，您可以让它为您完成工作。将其与其他bootstrap less文件一起添加。在bootstrap和响应式css之后包含它。这可以扩展到包括流体和偏移布局，但我不使用它们。

// REPEAT VARIABLES
// -------------------------
// Required since we compile the responsive stuff separately
@import "variables.less"; // Modify this for custom colors, font-sizes, etc

// Padding mixin
.padding (@gridColumnWidth, @gridGutterWidth,@padding) {
    // PadX mixin accepting column numbers greater than zero
    .padX (@index) when (@index > 0) {

        // Write out the span number using escaping
        (~".span@{index}.padded@{padding}") { 
            // Call the .pad mixin below with the column number
            .pad(@index); 
        }

        // Decrement the index and calls itself again
        // This is the less version of a for loop
        .padX(@index - 1);
    }

    // Catch the zero valued index essentially terminating the loop
    .padX (0) {}    

    // Mixin for padding
    .pad(@columns) {
        width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1) 
                - (@padding * 2));
    }

    // This will be written out
    (~".padded@{padding}")  {
        // Trick to add px to the end of your padding
        padding: 0px+@padding;
    }

    // Call the padX mixin with gridColumns as starting value
    .padX(@gridColumns);
}

// grid.less overide
// -------------------------
// Call the padding mixin
.padding(@gridColumnWidth, @gridGutterWidth, 10);
.padding(@gridColumnWidth, @gridGutterWidth, 20);

// responsive overides
// -------------------------
//Kill these if not using responsive
@media (min-width: 768px) and (max-width: 979px) {
  // Fixed grid
  .padding(@gridColumnWidth768, @gridGutterWidth768,10);
  .padding(@gridColumnWidth768, @gridGutterWidth768,20);
}

@media (min-width: 1200px) {
  // Fixed grid
  .padding(@gridColumnWidth1200, @gridGutterWidth1200,10);
  .padding(@gridColumnWidth1200, @gridGutterWidth1200,20);
}

您可以在这个真棒compiler中测试它，但您需要粘贴变量。无内容或必需变量来代替@import。

通过LESS向Bootstrap添加填充

2 个答案: