操縱第三方* .less css而不會黑客入侵

在Meteor（nodejs）項目中，我們使用較少的CSS預處理器，並且我們爲我們的css樣式使用第三方「bootstrap-full.less」。操縱第三方* .less css而不會黑客入侵

bootstrap中有一個（也許更多）CSS規則，我想核彈，因爲它有條件地覆蓋了其他規則。（細節如下）

但是，我不想「破解」原始引導文件，因爲這是「供應商代碼」。

我知道我可以重寫CSS規則，但這是更多的工作和麻煩。

所以問題是：
是否有可能在生成實際的css之前在較少的操作/處理解析的css規則？

特別是，這裏存在這條規則，

@media (max-width: 767px) { 
    ... 
    // Make all grid-sized elements block level again 
    [class*="span"], 
    .row-fluid [class*="span"] { 
    float: none; 
    display: block; 
    width: auto; 
    margin-left: 0; 
    }

這是在我的情況不理想，因爲我們只有這一個側邊欄，即保持相同的寬度，即使在移動。所以它應該繼續像表格一樣浮動單元格（span1，span2等）。

好吧，也許我會找出一個不同的解決方案，我的CSS/bootstrap問題，但仍然會有趣的知道，如果少讓我操縱它產生的CSS。

來源

2012-12-14 donquixote

您可以覆蓋！重要規則 – raam86

是的，我知道。但是之後我必須重新創建所有.span1，.span2，.span3，.span4等動態網格寬度以及其他內容。我不得不重寫bootstrap的一大部分。 – donquixote

我在我的項目中所做的是創建一個主文件.less文件，並在該文件中導入我的第三方少文件，然後跟隨我的自定義文件。任何你想更新的類，創建一個包含你自己目錄中的那個類的文件.less，然後簡單地編輯你想在文件中改變的屬性。因此，例如：

master.less

@import "/static/bootstrap/less/bootstrap.less"; 

// My custom files 

@import "scaffolding.less"; 
@import "type.less";

然後你調用自己的文件

type.less

h6{ 
    color: @myCustomColor; 
}

這樣，你把所有的引導文件完好無損，只覆蓋你需要的內容。它還可以很好地分離文件，因此如果您需要更新引導源，則可以輕鬆瀏覽，也可以輕鬆管理。

來源

2012-12-15 04:25:13 DigTheDoug

所以你不使用bootstrap-full.less，但單獨的？然後有你想要覆蓋或者核彈的那些你自己的版本？好吧，似乎是一個選擇。謝謝！ – donquixote

我直接從他們的github下載了他們的庫。因爲他們把他們的所有樣式分離成不同的文件。如果您只打算重寫一個或兩個樣式，只需將這些樣式放在@import語句後面，沒有理由創建所有新文件，但我的項目包含很大一部分自定義，因此它更易於管理。 – DigTheDoug

答案並不直接回答處理第三方代碼的問題，但無論如何它都是非常有幫助的，所以我把它投了！我會保持打開一段時間，以便其他人可以跳進去，也許還有其他有趣的回覆。 – donquixote

操縱第三方* .less css而不會黑客入侵

回答

相關問題