atomicsass默认变量一般用来设置默认值,然后根据需求覆盖。重写的方法也很简单,只需要重新声明默认变量之前的变量,就可以存放变量文件了。语义变量名,取值为直接属性值。//目录..variables.scss////1.颜色//2.选项//3.间距//4.正文//5.链接//6.网格断点//7.网格容器//8.Gridcolumns//9.Fonts//10.Components//11.Tables//12.Buttons//13.Forms//14.Dropdowns//15.Z-indexmasterlist//16.Navbar//17.Navs//18.Pagination//19.Jumbotron//20.表单状态和警报//21.Cards//22.Tooltips//23.Popovers//24.Tags//25.Modals//26.警报//27.进度条//28.列表组//29.图像缩略图//30.数字//31.面包屑//32.媒体对象//33.轮播//34.关闭//35.代码$gray-dark:#292b2c!default;$gray:#464a4c!default;不同组件的scss是独立的。例如.variables.scss定义的对应变量在_alert.scss中的.alert类中使用。组件文件不相互引用。入口文件统一管理。_alert.scss_animation.scss_badge.scss.alert{填充:$alert-padding-y$alert-padding-x;边距底部:$alert-margin-bottom;边框:$alert-border-width纯色透明;@includeborder-radius($alert-border-radius);}该组合有多个入口文件介绍组件,以形成不同的专业化,形成完整可用的样式,注意引用顺序。bootstrap.scss核心变量和mixins自定义(自定义覆盖默认变量值)variablesmixinsResetanddependenciesCoreCSSComponentsComponentsw/JavaScriptUtilityclassesbootstrap.scssbootstrap-flex.scssbootstrap-grid.scssbootstrap-reboot.scss-----mixbootstrap.scssins//核心变量@import"custom";@import"variables";@import"mixins";//Resetanddependencies@import"normalize";@import"print";//CoreCSS@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"分页";@import"徽章";@import"jumbotron";@import"警报";@import"进度";@import"媒体";@import"列表组";@import"响应式嵌入"";@import"close";//组件w/JavaScript@import"modal";@import"tooltip";@import"popover";@import"carousel";//Utilityclasses@import"utilities";自定义变量_custom.scss是专门用来覆盖默认变量值的文件,编译后的值会自定义。//Copyvariablesfrom`_variables.scss`添加到此文件以覆盖默认值//无需修改源文件。$gray-dark:#cccccc;$gray:#eeeeee;工具类最后介绍的工具类使用前面介绍的混合
