凌駕於LESS

Question

我正在使用使用LESS的Bootstrap，我是LESS的新手，所以我有問題。

例如，我想添加填充物物業到物體。

body { 
    margin: 0; 
    font-family: @baseFontFamily; 
    font-size: @baseFontSize; 
    line-height: @baseLineHeight; 
    color: @textColor; 
    background-color: @bodyBackground; 
} 

在bootstrap.less我做了這個：

@import "bootstrap/scaffolding.less"; 
body { 
    margin: 0; 
    font-family: @baseFontFamily; 
    font-size: @baseFontSize; 
    line-height: @baseLineHeight; 
    color: @textColor; 
    background-color: @bodyBackground; 
    padding: 50px; 
} 

但是在編譯的CSS文件我有體類，一個是原來的，然後我自己。 如何將屬性添加到類中而不重複？ 謝謝。

Answer 1

如前所述，最好不要修改引導較少的文件，而是將樣式添加到樣式表/較少文件中，以覆蓋引導程序。通過這種方式，您可以在升級到新版本的引導程序時避免出現問題 - 並且當您需要追蹤錯誤時，只需查看覆蓋範圍就會更容易。

現在，您可能遇到與重寫有關的問題，並試圖弄清楚爲什麼您的應用風格不是重寫引導程序的風格。在這種情況下，我建議您在安迪克拉克的大文章閱讀起來 - CSS：特異性戰爭（這是一個有點老了，但還是CSS具體的很好的解釋）：

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

編輯 - 所以要更好地解釋多類塊的優勢，這裏是先用兩個類的風格一種元素的例子：

CSS：

.center { 
    margin: 0 auto; 
} 
img.center { 
    display: block; 
} 

HTML

<div class="center">This will center horizontally</div> 
<img class="center" src="foo.png"><!-- this image will also center horizontally --> 

在上面的例子中，圖像將居中，因爲它會繼承兩個規則。現在讓我們說你想要一個嵌套的UL有填充較低量的比你的普通（父）UL，那麼您需要重寫此通過針對其層次（再在上面發佈的鏈接解釋了這一點）

ul { 
    list-style: none; 
    padding: 5px; 
} 

ul ul { 
    padding: 1px; 
} 

編輯，答案@克里斯Moschini評論

是的，你也可以通過LESS覆蓋引導默認值，如果你創建其中進口bootstrap.less自己少文件 - ，然後覆蓋你想改變的變量。

@import "less/bootstrap.less"; 
@brand-primary: red; 

要看看你可以在上GIT中的文件variables.less覆蓋的樣子，你也可以簽出mixins.less文件，如果找你找周圍的混亂有太多。

但在很多情況下，您需要通過css特性來做一些重寫。