修改適用於自適應模板的Sass Bootstrap變量（僅限移動版或桌面版）

Question

我正在研究一個已選擇在許多網站頁面上採用自適應路由（單獨的移動版和桌面版模板）而非響應版的網站。它仍然在這些模板上使用Bootstrap，併爲不同的Bootstrap斷點加載所有的CSS。我的希望是我可以使用Sass Bootstrap變量（https://github.com/twbs/bootstrap-sass）刪除大量不必要的CSS。使事情複雜化，移動模板使用sm類而不是xs編碼。例如，col-sm-16（他們將Bootstrap自定義爲16列而不是12）。

那麼，有沒有辦法修改Sass變量，以分別輸出移動和桌面模板所需的CSS？我主要希望減少必須加載的css數量以優化性能。

你應該知道的另一件事是我們只使用桌面的小斷點。我已經修改了瓦爾這樣：

$screen-xs:      640px; 
// //** Deprecated `$screen-xs-min` as of v3.2.0 
// $screen-xs-min:    $screen-xs !default; 
// //** Deprecated `$screen-phone` as of v3.0.1 
// $screen-phone:    $screen-xs-min !default; 

// // Small screen/tablet 
// //** Deprecated `$screen-sm` as of v3.0.1 
$screen-sm:      640px; 
// $screen-sm-min:    $screen-sm !default; 
// //** Deprecated `$screen-tablet` as of v3.0.1 
// $screen-tablet:    $screen-sm-min !default; 

// // Medium screen/desktop 
// //** Deprecated `$screen-md` as of v3.0.1 
$screen-md:      640px; 
// $screen-md-min:    $screen-md !default; 
// //** Deprecated `$screen-desktop` as of v3.0.1 
// $screen-desktop:    $screen-md-min !default; 

// // Large screen/wide desktop 
// //** Deprecated `$screen-lg` as of v3.0.1 
$screen-lg:      9999px; 

有沒有當你認爲我試圖刪除XS風格的桌面樣式更好的辦法？

Answer 1

Bootstrap3中的變量爲您提供了一種調整生成的CSS代碼的簡單方法，但不是選擇需要包含哪些內容以及不包含哪些內容。唯一的解決方案是編輯Bootstrap的* .scss文件並刪除不需要的代碼。例如，嘗試從bootstrap/_grid.scss中刪除少數「make-grid（...）」行。