使用更少和Bootstrap進行媒體查詢

Question

我剛開始少花錢。 為了減少標簽上Bootstrap的眾多類，我嘗試用更少的東西編寫一些簡單的包裝。

我的代碼完整如下。

// Import boostrap.
@import "./less/bootstrap.less";

// General classes for content.
focus {
    .span12;
}

content {
    .span8;
}

side {
    .span4;
}

這個較少文件的目的是提供看起來很漂亮的包裝器，它們可以完成一件事情，例如Bootstrap的.span12類。 我會及時將其擴展到各種按鈕。

無論哪種方式，在使用lessc style.less編譯less文件時，我都遇到問題。

它給出的錯誤是：

NameError: .span12 is undefined in /srv/http/www/style.less on line 6, column 5:
5 focus {
6     .span12;
7 }

我已經找到了一些有關.makeColumn(i)類的文檔，但問題是Bootstrap已經具有非常好的媒體查詢，因此我想避免自己編寫。

無論如何，是否要包裝已經具有媒體查詢的類，還是我需要吸收它並為包裝器編寫自己的類？

Answer 1

您將在這種方法中遇到一些主要問題。

首先，存在一些問題，Bootstrap是動態生成.spanX系列的類，因此不能立即將它們作為mixins訪問， 正如我在此答案中所指出的那樣 。

其次，一些Bootstrap的span代碼不是由.spanX系列設置的，而是通過[class*="span"]的屬性選擇器完成的（ 在撰寫本文時，請參見mixins.less文件的602行 ；它們是在@media規則的響應文件中也廣泛使用）。 .span12包含的代碼不會拾取該選擇器代碼，並且如果您不將.span12放入代碼中，則您的代碼將不會應用那些屬性。 因此，您需要解決此問題。

可能還有其他一些問題不會立即顯現出來，但是要點是，如果您想將Bootstrap用於網格目的（特別是響應速度），則最好按照設計使用它。 如果您不這樣做，那么最好去復制Bootstrap代碼並根據需要進行修改以修改自己的簡化網格代碼（如果您打算在html中使用較少的整體類）。