bootstrap4.0 css架構

原子性

sass的默認變量通常是用來設置默認值，而後根據需求來覆蓋的。
覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可

存放變量的文件。語義化的變量名，值爲直接的屬性值。
// Table of Contents..variables.scss
//
//  1. Colors
//  2. Options
//  3. Spacing
//  4. Body
//  5. Links
//  6. Grid breakpoints
//  7. Grid containers
//  8. Grid columns
//  9. Fonts
// 10. Components
// 11. Tables
// 12. Buttons
// 13. Forms
// 14. Dropdowns
// 15. Z-index master list
// 16. Navbar
// 17. Navs
// 18. Pagination
// 19. Jumbotron
// 20. Form states and alerts
// 21. Cards
// 22. Tooltips
// 23. Popovers
// 24. Tags
// 25. Modals
// 26. Alerts
// 27. Progress bars
// 28. List group
// 29. Image thumbnails
// 30. Figures
// 31. Breadcrumbs
// 32. Media objects
// 33. Carousel
// 34. Close
// 35. Code


$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;

組件性

不一樣組件的scss獨立出來。好比在_alert.scss中的.alert類中用到.variables.scss定義的對應變量。組件文件互不引用。入門文件統一管理。

_alert.scss
_animation.scss
_badge.scss

.alert {
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  @include border-radius($alert-border-radius);
}

組合

有幾個入口文件對組件進行按順序的引入，造成不一樣的專用，造成完整可用的樣式，注意引用順序。

bootstrap.scss

• Core variables and mixins

  • custom（自定義覆蓋默認變量值）

  • variables

  • mixins

• Reset and dependencies

• Core CSS

• Components

• Components w/ JavaScript

• Utility classes

bootstrap.scss
bootstrap-flex.scss
bootstrap-grid.scss
bootstrap-reboot.scss



-----bootstrap.scss
// Core variables and mixins
@import "custom";
@import "variables";
@import "mixins";

// Reset and dependencies
@import "normalize";
@import "print";

// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";

// Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";

// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";

// Utility classes
@import "utilities";

自定義變量

_custom.scss，是一個專門用來覆蓋默認變量值的文件。編譯後則是自定義出來的值。

// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

$gray-dark:                 #cccccc;
$gray:                      #eeeeee;

工具類

最後引入的工具類，用到了前面引入的mixins