Прежде всего, я не буду перечислять 100 000 причин, по которым начальная загрузка перешла от меньшего количества в SASS в V4. (Я планирую сравнить другую статью с меньшими затратами, Sass, Postcss).
Давайте перейдем к Bootstrap v4 sass
1. Все файлы SASS Bootstrap расположены в каталоге SCSS. Почему имя SCSS вместо SASS? В основном это включает в себя разницу между SASS и SCSS -синтаксисом. Синтаксис SCSS ближе к CSS, поэтому он более популярен и широко используется. Для получения подробной информации, пожалуйста, обратитесь к синтаксису SASS
2. Существует два типа файлов SCSS, один является началом подчеркивания, таких как _variables.scss, а другой - не подчеркивание, например, Bootstrap.scss. Разница между этими двумя заключается в том, что первый представляет импортный файл и не будет составлена в соответствующий файл CSS по умолчанию, в то время как последний будет компилировать соответствующий файл CSS. Таким образом, если есть два файла _a.scss, результатом компиляции по умолчанию является то, что составлены только файлы B.CSS. Если B хочет использовать стиль в _A.SCSS, вы можете использовать функцию импорта @Import A (импортированный файл может опустить имя подчеркивания и суффикс файлов). Для получения подробной информации, пожалуйста, обратитесь к синтаксису SASS
3. Если мы составляем весь каталог SCSS, мы можем получить четыре файла CSS, разделенные на Bootstrap.css, Bootstrap-flex.css, Bootstrap-reboot.css, bootstrap-grid.css. Эти четыре стиля CSS генерируются следующими четырьмя файлами SCSS.
Bootstrap-Reboot-это стиль сброса, а Bootstrap Grid-это стиль сетки. Эти два можно рассматривать как бесплатный отдельный стиль. Если вы не хотите использовать весь стиль начальной загрузки в некоторых сценариях, но хотите использовать его систему сброса или сетки, вы можете использовать эти два напрямую.
Разница между начальной загрузкой и Bootstrap-Flex состоит в том, что первый использует традиционный метод макета, в то время как последний использует метод гибки, поэтому вы можете использовать его в соответствии с вашей реальной ситуацией. Из приведенного выше изображения вы можете видеть, что Bootstrap-flex.scss сброшен с помощью $ enable-flex: true перед импортом Bootstrap.scss
4. Open Bootstrap.scss, и вы можете видеть, что импортируются различные файлы, которые разделены на 6 больших блоков, а именно:
variable & mixin: введите переменные и файлы Mixin, где все файлы в каталоге Mixin импортируются в файл _mixin.scss
Сброс: импорт нормализуйте и печатайте файлы
Ядро: введите основные файлы стилей, такие как сетка, форма, таблица, кнопка и т. Д.
Компонент: введите компонентные файлы, такие как NAV, CARD, CRADCHRUMB и т. Д.
Компонент JS: ввести файлы компонентов, которые требуют управления JS, таких как модальные, подсказки инструментов и т. Д.
Утилита: представьте некоторые файлы классов по всему сайту с некоторыми общими классами, такими как ClearFix, Center-Block и т. Д.
Как использовать и изменить стиль Bootstrap V4
Если вы знакомы с SASS, вы можете использовать его нахмель напрямую; Конечно, если вы не знакомы с SASS, вы можете найти скомпилированную Bootstrap.css в каталоге Dist/CSS.
Давайте поговорим об использовании CSS напрямую:
Ввести <link href = "bootstrap.css" rel = "stylesheet" /> in html
Если вам нужно изменить стиль начальной загрузки, вы можете создать другой лист стиля, такой как style.css, чтобы переопределить стиль начальной загрузки. Не рекомендуется напрямую изменять модификацию листа в стиле Bootstrap.css. Поскольку он написан с SASS, конечно, мы можем выбрать более качественный SASS. Есть также два способа модифицировать SASS, один неразрушающий, а другой разрушительный.
Для разрушительных вещей это означает изменение, где бы они не нравились, и нет хорошего трюка. Давайте поговорим о неразрушающих модификациях здесь, мы можем принять следующий метод:
Поместите все файлы SCSS Bootstrap в каталог Bootstrap
SCSSSBootStrap Directory (все файлы в исходном каталоге SCSS в Bootstrap) bootstrap.scss ... Directory Mixin ..._ Custom-variables.scss (пользовательские переменные или переменные, которые перезаписывают начальную загрузку) _custom-mixin.scss (custom Mixin).
Код style.scss заключается в следующем:
@charset "utf-8"; // import file @Import "Custom-Variables";@Import "Custom-Mixin";@Import "Bootstrap/Bootstrap";
Конечно, если у вас есть чистый код, вы всегда хотите отрезать неиспользованные стили, чтобы вы могли забрать Bootstrap.scss и проверить его. Разве не лучше просто удалить импорт этих нежелательных стилей? Если вы рассмотрите обновление в будущем, вы должны создать новый файл и представить все, что вы хотите в соответствии с методом в Bootstrap.scss. Для стилей компонентов вам нужно их представить, и если они вам не нужны, вы должны обратить внимание на основные стили и стили утилиты, потому что, возможно, вы используете эти основные стили в своем компоненте.
Как улучшить дизайн SASS Bootstrap V4
С точки зрения личного практического опыта, я чувствую, что Bootstrap V4 имеет следующие недостатки: (только для личного мнения)
Вы можете дополнительно выполнять планирование каталогов, например, размещать все файлы компонентов в каталог компонентов и файлы утилиты в каталоге утилиты, которые будут выглядеть более организованными, и теперь он немного разбросан и выглядит немного грязно.
Без % дизайна я лично думаю, что % дизайна является улучшением и очень эффективен для комбинированных деклараций, особенно некоторых коротких совместимых кодов и так далее.
Он может предоставить файл SCSS, интегрируя функции переменных и микшина, чтобы он мог облегчить создание файлов новых стилей и непосредственно импортировать этот интегрированный файл. Переменные и микшины могут быть объявлены случайно с помощью компонентных переменных и могут быть помещены в соответствующие компоненты SCS, потому что его могут использовать только компоненты, а не в файле переменных, что заставляет его выглядеть так много файлов переменных. Даже размер имеет файл микшина, который чувствует себя слишком много.