bootstrap4.0 css架构

2024年3月21日 188次阅读 来源: littlelightss

原子性

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

    原文作者：littlelightss
    原文地址: https://segmentfault.com/a/1190000008679730
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞