Bootstrap中Scss如何优雅地引入？

Question

最近学习完Sass相关知识后，开始阅读Bootstrap，并觉得利用Bootstrap的Scss来进行操作要比单纯的添加类名要炫酷得多（顺带还能摆脱HTML类名错综复杂的问题），但是在实际的操作中，新建一个自己的'self.scss'文件，引入'bootstrap-grid'时，在Scss下写是还行啦，但是一看编译出的css，就包含了大量我不需要的类名，极大地增加了css的体积，所以就想询问一下：

1. 是否有方法能够对bootstrap-grid部分引入？
2. 如果不能直接引入bootstrap-grid，是否只能一个个去引入相关联的变量文件、mixin文件？
3. 第2点感觉不够优雅，所以有没有更好的解决方案？

所以说到最后，我真正的目的是希望在引入其它的scss文件时，只编译我用到的部分（变量、函数等），不要过分增大编译后css的体积，希望大佬们给点建议。

新手上路，还请不吝赐教

附图：

Answer 1

感谢前面两位的回答，不过可能是我的表述原因，让人产生了一些误解，经过对源码的分析，我已经找到了解决办法：

@import "bootstrap-grid"
%grid-column{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: ($grid-gutter-width/2);
  padding-right: ($grid-gutter-width/2);
}
@mixin make-my-col($breakpoint:null,$size:null,$breakpoints: $grid-breakpoints){
  @extend %grid-column;
  @include media-breakpoint-up($breakpoint,$breakpoints){
    @include make-col($size,$grid-columns);
  }
}

我选择新建一个@mixin 来帮助我解决问题，利用这个mixin，我就可以自己创建响应式的列了。

@import "bootstrap-grid";
.side{
  @include make-my-col(sm,2);
  @include make-my-col(md,6);
}
.content{
  @include make-my-col(sm,10);
  @include make-my-col(md,6);
}

这样子也能极大缩减编译出的css代码量，同时不至于在HTML里写满col-md-XX一类的类名。

具体的分析过程我也总结出来发文了。

Grid(上)

Grid(下)

Answer 2

我觉得你对于css预编译有点误解？
因为变量和函数和mixin之类的是不会增加css文件大小的，他们只是存在于编译前，或者说其只是一个引用，无论是否被引用最终都不会变成css。
你如果只是需要bootstrap的变量，函数或是mixin这一类的话，就可以直接引入_variables.scss和_mixins.scss。

Answer 3

写多少 SCSS 就编译出多少 CSS ，如果你不希望使用太多 CSS ，那你就在写 SCSS 的时候就不要写不需要的东西就行了。

附: bootstrap 各个独立 scss https://github.com/twbs/boots...