添加前綴使用較少或SASS

Question

我想使用引導程序上，它包括400多個網站，並使用以前的CSS類名（這是我無法控制的）項目的CSS類名。我一直在遇到一些CSS名稱衝突，我的解決方案是爲Bootstrap添加一個前綴（例如.row爲.tb-row）。

我熟悉使用更小，其中一個附加的類被類纏繞添加命名空間的方法。不幸的是，這看起來不像解決我的問題。

是否有通過LESS，SASS，或任何其他編譯器的方法，可以很容易對我來說，一個TB-前綴添加到引導現有的所有類？

Answer 1

你也許可以做到這一點與上海社會科學院

• $命名空間： 「TB」;
• ⌘ + f（或類似）找到你的CSS文件中的所有類。你可能需要一個正則表達式（以及一些試驗+錯誤）才能找到它們。
• 將.#{$namespace}-添加到所有類。

理想情況下，你會得到得到這樣的：

$namespace: "tb"; 

.#{$namespace}-myClass { 
    background:pink !important; 
} 

.#{$namespace}-carousel-module { 
    width: 25%; 
} 

編譯

.tb-myClass { 
    background:pink !important; 
} 

.tb-carousel-module { 
    width: 25%; 
} 

「易」 可能是一個延伸，而是 「更容易」 似乎配件。

我不確定這是否是最好的方法，誠實地說，我只是ripping off a gist that I saw與人的評論比我更聰明。雖然可以派上用場！

Answer 2

您將需要直接修改引導代碼，這如何能在更短的優雅實現一個例子：

.prefixname { 
    &-row { 
     ... 
    } 
} 

Answer 3

我添加前綴「TB-」所有引導類（少）在v3.1.0中。因此，編譯較少的文件後，您將得到類似於「.tb-btn」 您可以在我的項目中分支https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

Answer 4

以下是添加了類前綴的Bootstrap分支。 https://github.com/sneas/bootstrap-sass-namespace。對我來說工作得很好。