Bootstrap-sass<3> mixins

Bootstrap-sass mixins
由于之前基本用的都是基础布局,mixins文件只用到几个基础的mixin,但也算比较常用的。
<1>make-row()系列:

我们可以看到make-row()功能就是在布局中生成一行,同时我们也看到在grid.scss中,也有make-xs-column()且对该行数做了不同分辨率下的适配。
如我们可以如下使用:当你在section中想要更好的管理内容时。
<section>
<-- sass-->
section {
    @include make-row();
}
<2>size()
当我们用bootstrap生成行列时,可能跟里面的内容大小不是完全的恰到好处,这个时候,我们可以用size(),它是基于内容的,可以使外围的容器大小基于内容大小进行变化。


<3>组件和效果相关
bootstrap为我们写好了很多组件,而bootstrap-sass也为我们封装好了这些组件在mixins下。在mixins文件夹中你可以看到好多熟悉的名字,如progress-bar,tab,table,panels等这些都是具体组件相关,当我们需要时直接查看调用即可,每个文件里一般就一个函数,易读性和扩展性十分强。
同时,我们也看到一些效果相关的mixins,如size,tab-focus,text-overflow等,这些也是非常不错的mixins。


以上是比较常用的mixins,接下来看一些从网上寻来感觉不错的mixins库.
<1>Bourbon
一个sass的库,在跨浏览器方面做了很大的优化,里面包含着很多跨浏览器相关的sass mixins.
http://bourbon.io/
<2>Sass css3 mixins
这是一个基于css3效果的,并将效果封装在mixins中的一个sass库。
http://mynameismatthieu.com/sass-css3-mixins/


当你完成之后生成css文件时发现会比较大,因为里面包含了很多空格空行,这时,你可以用gulp进行压缩。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值