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

2番目の方法でスパンにパディングが追加されないのはなぜですか？

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

このすばらしいコンパイラーでテストすることもできますが、変数のないコンテンツまたは必要な変数を @import の代わりに貼り付ける必要があります。

于 2012-11-17T12:57:07.880 に答える