How NOT to combine all CSS into one file with SASS and bootstrap -

i'm relatively new sass , bootstrap. use bootstrap sass , struggle little bit concept.

i used css this: 1 base css-file basic layout (eq. base.css). every template includes additionally different css-file (eq. sitemap.css, team.css, news.css). css-files contain parts of respective templates. can overwrite definitions in previous files.

in sass compiled in 1 file. in combination bootstrap struggle concept used until now.

every time want add new css-file existing definitions, error because have reinclude complete bootstrap structure. if reinclude it, whole bootstrap code gets written additional files (eq. sitemap.css, team.css, news.css) too. if include both files in html-tree, bootstrap definitions (like whole normalize block) gets defined 2 or more times.

i have setup:

- css |-- source | |-- base.scss | |-- team.scss | |-- vendors | | |-- bootstrap... └-- output   |-- base.css   └-- team.css 

in base.scss include bootstrap stuff. need bootstrap stuff in team.scss, not main stuff normalize things.

how achieve that? possible or have switch css needs adding css-class body tag (like body.team)? have carry whole css stuff of every page in 1 file. isn't crab?

edit clear things bit: in base.scss:

@import "settings/vars"; @import "vendors/bootstrap"; ... header {     @extend .container;     ...     .contentbox {         margin-top: $maingap;     }     ... } ... 

and in team.scss:

header .contentbox {     @extend .sr-only; } 

it's absolutely clear "@extend .sr-only;" doesn't work in team.scss because of absence of bootstrap. if include bootstrap with

@import "vendors/bootstrap"; 

in first line of team.scss, automatically add standard 16kb bootstrap things team.css well. however, these definitions in base.css. have preventable overhead.

i think know there no way say: "hey bootstrap. included in base.scss. don't have write whole main definition of team.scss again. need because usable framework. please provide me functions , variables anyway.". perhaps?

what in case compile base.scss bootstrap , base code , customized _variables.scss. if want add team.scss import mixins , custom variables need use bootstrap. sounds great!

but...

since .sr-only , other provided classes instead sass mixins, can't @include it, .transition mixin example.

so, moment if using sass, have 2 options:

1. import bootstrap module class want extend/reuse

   //contain .sr-only definition @import "vendors/bootstrap/_scaffolding";  @import "vendors/bootstrap/_variables";  header .contentbox {     @extend .sr-only; } 

2. copy/paste class bootstrap source , extend it:

   @import "vendors/bootstrap/_variables";  // copy/paste .sr-only class reuse, un-dry .sr-only {   position: absolute;   width: 1px;   height: 1px;   margin: -1px;   padding: 0;   overflow: hidden;   clip: rect(0 0 0 0);   border: 0; }  header .contentbox {   @extend .sr-only; }