Я работаю над сайтом, который выбрал адаптивный маршрут (отдельные шаблоны для мобильных и настольных компьютеров) на многих страницах сайта, а не адаптивный. Он по-прежнему использует Bootstrap для этих шаблонов и загружает все css для различных контрольных точек Bootstrap. Я надеюсь, что смогу использовать переменные 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 для таблицы стилей рабочего стола?
