修改自适应模板的 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(...)"

修改自适应模板的 Sass Bootstrap 变量（仅限移动设备或桌面设备）

Modifying Sass Bootstrap Variables for Adaptive Templates (Mobile or Desktop Only)

css

sass

twitter-bootstrap

bootstrap-sass