我已经开始使用 Twitter Bootstrap 的 Sass 风格,我只是想出了一种合理的方式来构建我的文件,这样我就可以在不弄乱核心文件的情况下进行自己的自定义覆盖,并将所有 CSS 保存在一个文件中以加快加载速度。
简而言之,我将所有 sass 文件放入 assets/sass 并为核心文件创建一个名为bootstrap的子目录。然后,我为我的自定义 scss 文件创建了一个名为theme的同级目录。
转到/bootstrap
此目录并在其中有一个名为的文件bootstrap.scss
,其中包括所有核心组件。将此文件重命名为theme.scss
并将其放在父目录中,如下所示:
如您所见,我已经在主题目录中包含了一些自定义的覆盖 sass 的文件。这些将在编译时添加到默认引导 CSS 的底部。
当您像这样theme.scss
进入并更改包含路径时,魔法就会发生。向图像底部查看覆盖,向顶部查看自定义变量参考。
注意:如果要在引导程序中编辑变量,最好在目录中创建自己的_variables.scss
文件theme
并将其包含在文件顶部theme.scss
。通过这种方式,您可以覆盖引导变量,这些变量将来会随着更新而持续存在。
然后只需包含theme.css
在您的页面中,瞧。这就是我开始这样做并且还没有遇到任何错误的方式。
我发现这是我见过的最简单的方法。当新的更新出现时,我只会更新核心引导文件并保留我的编辑!