使用Sass的Mixin实现自动添加浏览器前缀
来源:互联网 发布:windows账户有什么用 编辑:程序博客网 时间:2024/06/06 00:20
使用Sass的@mixin指令实现自动添加浏览器前缀
解决每次打某些CSS3样式需要加各种浏览器前缀这一麻烦问题。
目录:
- 使用Sass的mixin指令实现自动添加浏览器前缀
- 为什么要加浏览器前缀
- 浏览器引擎前缀Vendor Prefix
- Sass和Mixin
- 定义Mixins
- 使用mixin指令
- 自动添加前缀的mixin指令
- 使用方法
- 主要的需要添加浏览器引擎前缀的属性
为什么要加浏览器前缀
当一个浏览器实现一个新的属性、值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别。
通俗一点来说,就是当官方标准还没有最终确定之前,部分浏览器根据最初的草案实现了部分CSS样式,然后使用自己的私有前缀以便与标准进行区分,同时也便于自己的渲染引擎识别。
因此,要一直到官方标准正式确定,可以支持某个新的CSS样式了,这时候就可以去掉前缀,被所有的主流浏览器所使用。
浏览器引擎前缀(Vendor Prefix)
值得注意的是,市场上绝大多数的浏览器以及独立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)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。
定义Mixins
混合指令的用法是在 @mixin 后添加名称与样式。比如:
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}
使用@mixin指令
使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
.page-title { @include large-text; padding: 4px; margin-top: 10px;}
上面的代码将会被编译成:
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }
自动添加前缀的@mixin指令
// 默认将输出webkit前缀,moz前缀和标准@mixin prefixer($property, $value, $prefixes: webkit moz) { #{$property}: $value; @each $prefix in $prefixes { @if $prefix == webkit { -webkit-#{$property}:#{$value}; } @else if $prefix == moz { -moz-#{$property}:#{$value}; } @else if $prefix == o { -o-#{$property}:#{$value}; } @else if $prefix == ms { -ms-#{$property}:#{$value}; } }}
首先遍历参数 $prefixes ,依次输出参数里面包含的前缀名,接着使用插值语句 #{}输出包含浏览器前缀的属性名加属性值,这就输出了一个完整的包含浏览器前缀的样式了,最后输出不带前缀的标准写法。
值得注意的是,在 @mixin 指令中给参数 $prefixes设置了默认值 “ webkit moz ”,这样,当我们没有输入第三个参数的时候,就默认输出输出webkit前缀,moz前缀和不带前缀的标准的写法。
使用方法
#main { @include prefixer(border-radius, 10px, webkit moz o ms);}
编译为:
#main { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
当然,如果只想默认输出webkit前缀,moz前缀和标准写法,我们可以这样写:
#main { @include prefixer(border-radius, 10px);}
编译为:
#main { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
主要的需要添加浏览器引擎前缀的属性
- 过渡属性(transition-property, transition-duration, transition-timing-function, transition-delay)
- 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
- border-radius
- box-shadow
- backface-visibility
- column属性
- flex属性
- perspective属性
当然这只是部分而已,还有其他一些CSS3属性需要加浏览器前缀。
- 使用Sass的Mixin实现自动添加浏览器前缀
- 浏览器前缀的Sass写法
- sass中常用的mixin
- Sass的混合-@mixin,@include
- Webpack3+postcss+sass+css自动添加前缀配置
- Sass mixin
- SASS Mixin实现响应式布局
- sass文件的中的@mixin 和%
- PHP的Mixin实现
- Google Fonts Sass Mixin
- Font Include Sass Mixin
- sass/scss语法@mixin
- 类名前自动添加前缀
- XMixins -- 一个兼容LESS、SASS、Stylus的超级mixin库!
- scss\sass calc 的mixin&include 处理方法
- React中Mixin的使用
- vue中mixin的使用
- sass揭秘之@mixin,%,@function
- 适配器模式(结构型设计模式)
- XVII Open Cup named after E.V. Pankratiev. XXI Ural Championship G glassese of solutions
- 金字塔原理学习总结
- Windows技巧:在当前操作目录下直接打开命令窗口
- 数据分析介绍之七——单变量数据观察之汇总统计和箱线图
- 使用Sass的Mixin实现自动添加浏览器前缀
- Python笔记7
- 排序算法之插入排序
- leetcode.array--40. Combination Sum II
- HDU1203 I NEED A OFFER!-概率dp
- vue 设置多个反向代理以及easy-mock的简单的使用方法
- POST和GET请求的区别
- XVII Open Cup named after E.V. Pankratiev. Grand Prix of SPb D cutting potatoes
- 未添加安全组规则设置导致通过公网IP地址不能访问ECS云服务器