Bootstrap Sassをカスタマイズしながらつかう

bootstrap-sass-official

Rails Assetsからbootstrap-sass-officialを入れる時のやつ．

bootstrap-sassをバラさない

最初にvariablesを読み込む． bootstrap/_variables.scssは!defaultで変数宣言をしているので，自分の_variables.scssでbody-bgやtext-color，brand-primaryなど先に宣言しておけば大丈夫． ただし，color系の変数（gray-x） が使えないのがちょっとつらい．

// my variables(_variables.scss)
@import "variables";
// my mixins(_mixin.scss)
@import "mixins";

@import "bootstrap-sass-officials";

// my styles
@import "style"

bootstrap-sassをバラす

とりあえず全部書いてみた． 不要な機能やcomponentはコメントアウトするなり削除するなりしたらOK．

// my variables(_variables.scss)
@import "variables";
// my mixins(_mixin.scss)
@import "mixins";

@import "bootstrap-sass-official/bootstrap-sprockets";

// Core variables and mixins
@import "bootstrap-sass-official/bootstrap/variables";
@import "bootstrap-sass-official/bootstrap/mixins";

// Reset and dependencies
@import "bootstrap-sass-official/bootstrap/normalize";
@import "bootstrap-sass-official/bootstrap/print";
@import "bootstrap-sass-official/bootstrap/glyphicons";

// Core CSS
@import "bootstrap-sass-official/bootstrap/scaffolding";
@import "bootstrap-sass-official/bootstrap/type";
@import "bootstrap-sass-official/bootstrap/code";
@import "bootstrap-sass-official/bootstrap/grid";
@import "bootstrap-sass-official/bootstrap/tables";
@import "bootstrap-sass-official/bootstrap/forms";
@import "bootstrap-sass-official/bootstrap/buttons";

// Components
@import "bootstrap-sass-official/bootstrap/component-animations";
@import "bootstrap-sass-official/bootstrap/dropdowns";
@import "bootstrap-sass-official/bootstrap/button-groups";
@import "bootstrap-sass-official/bootstrap/input-groups";
@import "bootstrap-sass-official/bootstrap/navs";
@import "bootstrap-sass-official/bootstrap/navbar";
@import "bootstrap-sass-official/bootstrap/breadcrumbs";
@import "bootstrap-sass-official/bootstrap/pagination";
@import "bootstrap-sass-official/bootstrap/pager";
@import "bootstrap-sass-official/bootstrap/labels";
@import "bootstrap-sass-official/bootstrap/badges";
@import "bootstrap-sass-official/bootstrap/jumbotron";
@import "bootstrap-sass-official/bootstrap/thumbnails";
@import "bootstrap-sass-official/bootstrap/alerts";
@import "bootstrap-sass-official/bootstrap/progress-bars";
@import "bootstrap-sass-official/bootstrap/media";
@import "bootstrap-sass-official/bootstrap/list-group";
@import "bootstrap-sass-official/bootstrap/panels";
@import "bootstrap-sass-official/bootstrap/responsive-embed";
@import "bootstrap-sass-official/bootstrap/wells";
@import "bootstrap-sass-official/bootstrap/close";

// Components w/ JavaScript
@import "bootstrap-sass-official/bootstrap/modals";
@import "bootstrap-sass-official/bootstrap/tooltip";
@import "bootstrap-sass-official/bootstrap/popovers";
@import "bootstrap-sass-official/bootstrap/carousel";

// Utility classes
@import "bootstrap-sass-official/bootstrap/utilities";
@import "bootstrap-sass-official/bootstrap/responsive-utilities";

// my styles
@import "style";