我添加填充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
爲什麼第二方式不添加任何填充跨度?
@MariuszPoplawski通常的錯誤在那裏,你根本沒有期望他們。然後向別人展示你的代碼確實有幫助。 :) – 2012-08-11 11:08:24