消息关闭
    暂无新消息!

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

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

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

新手上路,还请不吝赐教

附图:


3个回答

︿ 2

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

︿ 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(下)