Bootstrap-Sass 源码解析三:Mixins

Posted 小马xml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap-Sass 源码解析三:Mixins相关的知识,希望对你有一定的参考价值。

mixin在sass的语法中是混入的意思,可以传递参数,类似与函数的意思。这里的mixins.scss自然就是定义了一系列混入库,供bootstrap各组件样式调用。

下面根据mixinx.less为目录,解析boostrap-sass中的所有的mixin。

内容:

|-- Utilities                     //各种工具混入
    |-- hide-text                 //隐藏text
    |-- opacity                   //设置透明度
    |-- image                     //响应式图片混入、视网膜混入(根据屏幕显示不同分辨率图片)
    |-- labels                    //label变化混入(移动到labels背景会变色,下面出现的“变化”意思相同)  
    |-- reset-filter              //清除ie9以下背景倾斜
    |-- resize                    //使对象变得可调整大小
    |-- responsive-visibility     //响应式可见和不可见(用于responsive-utilityies)
    |-- size                      //设置大小
    |-- tab-focus                 //针对webkit内核添加选中轮廓
    |-- reset-text                //重置text(用于清除各种text属性)
    |-- text-emphasis             //text强调样式
    |-- text-overflow             //text溢出样式
    |-- vendor-prefixes           //增对个浏览器内核为属性添加前缀的混入都在这里

|-- Components                    //针对各组件的混入
    |-- alerts                    //alerts变化混入
    |-- buttons                   //按钮的变化、设置按钮大小
    |-- panels                    //panel变化
    |-- pagination                //pagination设置大小
    |-- list-group                //list-group-item变化
    |-- nav-divider               //水平分隔(用于dropdowns和nav list)
    |-- forms                     //定义了form验证时的各种样式(错误,警告等)
    |-- progress-bar              //progress-bar变化
    |-- table-row                 //table-row变化

|-- Skins                         //皮肤混入(主要是修改bootstrap的主题皮肤)
    |-- background-variant        //背景变化
    |-- border-radius             //border圆角
    |-- gradients                 //渐变效果

|-- Layout                        //布局相关
    |-- clearfix                  //清除浮动
    |-- center-block              //block居中
    |-- nav-vertical-align        //nav垂直排列的间隔 
    |-- grid-framework            //用于构建网格系统的框架(供下面的grid调用) 
    |-- grid                      //构建网格系统

以上是关于Bootstrap-Sass 源码解析三:Mixins的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap-Sass 源码解析三:Mixins

Bootstrap-Sass 源码解析一:文件组织架构

Bootstrap-Sass 源码解析一:文件组织架构

Bootstrap-Sass 源码解析一:文件组织架构

bootstrap-sass_源码解析四:Utility

bootstrap-sass_源码解析四:Utility