0

我以这种方式在引导程序中向 div 添加填充 10px：

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

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

4

2 回答 2

3

使用:, 不在=变量赋值中。

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

通常，您可以使用此编译器来检查您的LESS代码。

于 2012-08-10T20:21:25.343 回答
1

由于您使用较少，您不妨让它为您完成工作。将此与其他引导程序较少的文件一起添加。在引导程序和响应式 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);
}

您可以在这个很棒的编译器中对其进行测试，但是您需要粘贴 variables.less 内容或必需的变量来代替 @import。

于 2012-11-17T12:57:07.880 回答