css - 修改自适应模板的 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(...)”行。