使用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）用于定义可重复使用的样式，避免了使用无语意的 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属性需要加浏览器前缀。