添加填充通过自举LESS

我添加填充10px的自举这种方式的div：添加填充通过自举LESS

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

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

来源

2012-08-10 Solver

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

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

一般情况下，你可以使用this compiler来检查你的代码LESS。

来源

2012-08-10 20:21:25

@MariuszPoplawski通常的错误在那里，你根本没有期望他们。然后向别人展示你的代码确实有帮助。 :) – 2012-08-11 11:08:24

由于您使用较少，您可以让它为您做好工作。将其与其他无引导程序的文件一起添加。将它包含在引导程序和响应式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 
     (~"[email protected]{index}[email protected]{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 
    (~"[email protected]{padding}") { 
     // Trick to add px to the end of your padding 
     padding: [email protected]; 
    } 

    // 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的variables.less内容或所需的变量。

来源

2012-11-17 12:57:07 TheGwa

添加填充通过自举LESS

回答

相关问题