前綴所有選擇器的twitter引導在更少

我想開始學習Twitter Bootstrap並將其合併到我的網站（從表單元素開始），但它會打破網站的其餘部分，如果我按原樣包含它。前綴所有選擇器的twitter引導在更少

我想前綴的所有的選擇，這樣我可以逐漸添加程序的引導風格，像這樣的內容：<div class="bootstrap"></div>

因爲我纔剛剛開始學習，我真的不知道什麼是可能的與less。我已經手動完成了選擇器前綴，但我很好奇是否有一種方法可以通過less來實現，這樣我就可以通過修改引導程序來學習它，同時仍將它隔離在所需的引導程序容器中。

現在，在編譯少量文件後，我必須在第二步中添加前綴。

感謝您的任何建議！

2012-06-22 Yuji ' Tomita' Tomita

您可以編輯該文件bootstrap.less在這樣的封裝一切：

.bootstrap { 
    // CSS Reset 
    @import "reset.less"; 

    // Core variables and mixins 
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc 

    [...] 

}

更新：

由於引導文件使用較少&運營商，如：

// list-group.less (bootstrap 3.0.0) 
.list-group-item { 
    [...] 
    a& { 
     [...] 
    } 
}

上述代碼的編譯將以帶有語義錯誤的規則結束，且不會以.bootstrap作爲前綴：

a.bootstrap .list-group-item { 
    color: #555555; 
} 
a.bootstrap .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
a.bootstrap .list-group-item:hover, 
a.bootstrap .list-group-item:focus { 
    text-decoration: none; 
    background-color: #ecf0f1; 
}

爲了解決這個問題使用以下方法來編譯自舉：

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css

現在上面的行會被編譯爲：

.bootstrap a .list-group-item { 
    color: #555555; 
} 
.bootstrap a .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
.bootstrap a .list-group-item:hover, 
.bootstrap a .list-group-item:focus { 
    text-decoration: none; 
    background-color: #f5f5f5; 
}

來源

2012-06-22 07:29:07 periklis

哈，我知道它會非常棒！謝謝periklis。 –

這並沒有真正解決問題命名衝突。它在所有引導CSS類之前將特定類作爲選擇器。所以爲了使用它們，你必須將你的HTML包裝在一個容器（如DIV）中，並使用一個特定名稱的類，然後引導CSS將只應用於該DIV中。這有一些問題。

一個問題是Bootstrap CSS包含BODY和HTML的定義，如果將選擇器放在它們前面，它們將無法應用。

另一個問題是，在您的自定義CSS中，您定義了一些類似「.dropdown」或「.table」的Bootstrap類的樣式。您可能會定義未由Bootstrap定義的樣式的各個方面，您可能會覆蓋Bootstrap樣式或將其混淆。例如，如果Bootstrap在「.table」類中定義了填充，並且您在自己的「.table」類中定義了邊距，則在頁面呈現時，它們將根據CSS優先級規則進行組合。即使你在Bootstrap的「.table」類前放置了一個特定的自定義選擇器類，並且在你自己的「.table」類前面放了一個不同的選擇器類，它們仍然會組合和交互。

使用這樣的選擇器類實際上並不是真正的「名稱空間」，並且不會完全隔離CSS。實現真正隔離的最好方法是在每個類名前添加一個唯一的前綴字符串。

來源

2013-06-06 09:44:42

但前綴意味着引導JavaScript將不再起作用。 – Rhys

「實現真正隔離的最好方法是在每個類名前添加一個唯一的前綴字符串。」 +2 – danjah

爲了避免periklis的回答中提到的問題：創建自己的prefixed-bootstrap.less是重新編譯編譯bootstrap.css在：

.bootstrap { 
    @import (less) 'dist/css/bootstrap.css'; 
    @import (less) 'dist/css/bootstrap-theme.css'; /* optional */ 
}

無需sed命令即可。拉爾斯尼爾森的回答中提到的觀點當然依然有效。

來源

2013-11-06 13:04:33 tuomassalo

這很好用！乾淨簡單！謝謝 – yorch

啊，天才。這是做這件事的一個簡單方法。 –

這應該是一個被接受的答案，毫無疑問。 –

前綴所有選擇器的twitter引導在更少

回答

相關問題