Bootstrap-Sass 源码解析三:Mixins

原创 2016年08月31日 10:40:27

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源码之旅-mixins解读(1)

真的很纠结,怎么去介绍Bootstrap中的mixins呢?在不熟悉Bootstrap之前去说mixins没有必要,为啥呢?其中有好多mixins是跟它特定的dom结构有关系的,比如下面的alerts...

Bootstrap源码之旅-mixins解读(2)

粘贴代码又开始了!forms.less// Form validation states // // Used in forms.less to generate the form validatio...

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

Bootstrap-Sass 源码解析

Bootstrap-Sass 源码解析二:Variables.scss

上节主要看了下bootstrap这个文件的内容,对boostrap的整个组织架构有了一个全局上的了解。下面我们针对几个主要文件进行解析。...

sass 公用10个mixins代码块

sass 公用10个mixins代码块
  • hongc93
  • hongc93
  • 2017年05月05日 16:54
  • 274

十个有用的Sass Mixins

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用,可以帮助前端开发人员节省很多时间,而且能更好...
  • mychirs
  • mychirs
  • 2014年11月14日 10:36
  • 482

SASS基础——十个常见的Mixins

从W3cplus最近的更新都可以看出我的学习新动向。是的,自从开始学习SASS之后,我喜欢上了SASS。因为他能让我的工作效率更快,同时让我更加节约出时间去做一些我自己喜欢的事情。 现在开始我开...
  • offbye
  • offbye
  • 2015年06月15日 14:11
  • 774

Sass与Compass实战 随书源码

  • 2016年05月10日 09:02
  • 360KB
  • 下载

Sass和Compass设计师指南pdf+源码

  • 2016年02月22日 11:30
  • 47.55MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-Sass 源码解析三:Mixins
举报原因:
原因补充:

(最多只允许输入30个字)