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

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(...)”行。