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

转载 2018年04月17日 11:53:45

使用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)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。

定义Mixins

混合指令的用法是在 @mixin 后添加名称与样式。比如:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

使用@mixin指令

使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
  • 1
  • 2
  • 3
  • 4
  • 5

上面的代码将会被编译成:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

自动添加前缀的@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};
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

  首先遍历参数 $prefixes ,依次输出参数里面包含的前缀名,接着使用插值语句 #{}输出包含浏览器前缀的属性名加属性值,这就输出了一个完整的包含浏览器前缀的样式了,最后输出不带前缀的标准写法。 
  值得注意的是,在 @mixin 指令中给参数 $prefixes设置了默认值 “ webkit moz ”,这样,当我们没有输入第三个参数的时候,就默认输出输出webkit前缀moz前缀不带前缀的标准的写法


使用方法

#main {
    @include prefixer(border-radius, 10px, webkit moz o ms);
}
  • 1
  • 2
  • 3

编译为:

#main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6



当然,如果只想默认输出webkit前缀,moz前缀和标准写法,我们可以这样写:

#main {
    @include prefixer(border-radius, 10px);
}
  • 1
  • 2
  • 3

编译为:

#main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }
  • 1
  • 2
  • 3
  • 4

主要的需要添加浏览器引擎前缀的属性

  • 过渡属性(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写法 给animation添加webkit前缀(待完善)

sass文件内容-------------------------------------------- @mixin prefix-animation($animation-name){     a...
  • aamen1109
  • aamen1109
  • 2016-03-16 18:08:32
  • 1658

浏览器前缀的Sass写法

item{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex...
  • Levis_1993
  • Levis_1993
  • 2015-10-25 23:46:30
  • 1088

gulp常用模块gulp-sass,gulp-autoprefixer,gulp-wrap,browser-sync,gulp-rev,gulp-rev-collector模块解析

gulp
  • u013558749
  • u013558749
  • 2016-06-12 11:44:17
  • 2910

关于less的css3前缀的写法

每天坚持做一件事(这事当然是有点难度和意义的事情,而不是睡觉。。。)还真不容易,有两天没有写前端笔记了。一方面是正职工作忙,另一面是感觉能输出的东西越来越少。那今天来分享的什么的,找来找去,觉得les...
  • natalie86
  • natalie86
  • 2015-02-05 10:09:17
  • 4414

sass中常用的mixin

//-----------------------------------浏览器前缀----------------------------------------- //例子:@includ...
  • u013909970
  • u013909970
  • 2016-08-17 15:01:13
  • 2323

SASS Mixin实现响应式布局

好的,今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。 列间空隙的处理,每...
  • whqet
  • whqet
  • 2014-03-30 08:58:39
  • 4692

Webpack3+postcss+sass+css自动添加前缀配置

有一段时间没有写笔记了,今天记录一下 本用的是react框架,webpack3+sass的配置 当前我们在写css样式的,时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如: ....
  • xiaotuni
  • xiaotuni
  • 2017-09-18 00:00:30
  • 5370

webstorm scss 自动编译添加css3前缀

sass或者scss编译为css时,webstorm配置如下:(http://www.cnblogs.com/phoenix-smile/p/5063216.html) 如果没有安装ruby则先安装,...
  • u013022210
  • u013022210
  • 2016-09-14 10:16:00
  • 1410

sass/scss语法@mixin

css新增HSL颜色模式,h色调(360度圆盘),s饱和度(百分比),l亮度(百分比) eg.   p{ color:hsl(270,100%,100%); } sass支持hsl属性,如果直接在...
  • VarIInJSon
  • VarIInJSon
  • 2016-10-11 08:38:23
  • 2166

Sass的混合-@mixin,@include

1,无参数,有参数和带默认值参数的@mixin声明sass文件内容://带参数,默认50 @mixin opa($opa:50){ opacity: $opa / 100; filter:al...
  • ABAP_Brave
  • ABAP_Brave
  • 2017-02-06 14:43:38
  • 2027
收藏助手
不良信息举报
您举报文章:使用Sass的Mixin实现自动添加浏览器前缀
举报原因:
原因补充:

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