使用Sass的Mixin实现自动添加浏览器前缀

使用Sass的@mixin指令实现自动添加浏览器前缀

  解决每次打某些CSS3样式需要加各种浏览器前缀这一麻烦问题。

  目录:


为什么要加浏览器前缀

  当一个浏览器实现一个新的属性、值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别。
  通俗一点来说,就是当官方标准还没有最终确定之前,部分浏览器根据最初的草案实现了部分CSS样式,然后使用自己的私有前缀以便与标准进行区分,同时也便于自己的渲染引擎识别。
  因此,要一直到官方标准正式确定,可以支持某个新的CSS样式了,这时候就可以去掉前缀,被所有的主流浏览器所使用。


浏览器引擎前缀(Vendor Prefix)

前缀 浏览器
-moz- 火狐等使用Mozilla浏览器引擎的浏览器
-webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器
-o- Opera浏览器
-ms- Internet Explorer


   值得注意的是,市场上绝大多数的浏览器以及独立app都是使用的WebKit内核,作为应用最广的浏览器内核,安卓、IOS等系统的手机内置浏览器以及最主流的第三方浏览器使用的也都是WebKit
  Android平台中UC的U3内核、手机QQ浏览器的X5内核以及华为天天浏览器的T9内核均基于开源内核Webkit开发,在Webkit的基础上进行二次优化,并不能算是完全的自主内核。而在iOS以及WP7平台上,由于系统封闭,不允许除系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发,优化功能和自制UI。
  也就是说,移动端基本上只需要添加 -webkit- 前缀即可。


Sass和Mixin

Sass是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。Sass号称世界上最成熟最稳定最强大的专业级CSS扩展语言(官网说的)。

使用Sass前肯定需要先安装它( 安装指南),然后可以看看阮一峰老师写的 SASS用法指南

混合指令(Mixin)用于定

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值