css - 通过 LESS 向 Bootstrap 添加填充

Question

我以这种方式在 bootstrap 中将 padding 10px 添加到 div:

html:

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

我的.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>

我的.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 代码。