3、SVG背景图片及PNG和retina回退
这个mixin依赖于Modernizr，在你在页面上创建图片的时候添加一些额外的代码。
你需要一个.svg文件作为默认的背景图片。此外还需要一个.png格式的图片作为在不支持SVG格式的浏览器上的回退。另外，你还需要一个2倍尺寸大小的.png格式的图片作为retina设备上的回退。
你所需要的图片一共有：
- pattern.svg - pattern.png - pattern@2x.png $image-path: ‘…/img’ !default; $fallback-extension: ‘png’ !default; $retina-suffix: ‘@2x’; @mixin background-image($name, $size:false){ background-image: url(#{KaTeX parse error: Expected 'EOF', got '}' at position 11: image-path}̲/#{name}.svg); @if($size){ background-size: $size; } .no-svg &{ background-image: url(#{KaTeX parse error: Expected 'EOF', got '}' at position 11: image-path}̲/#{name}.#{$fallback-extension}); @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { background-image: url(#{KaTeX parse error: Expected 'EOF', got '}' at position 11: image-path}̲/#{name}#{KaTeX parse error: Expected 'EOF', got '}' at position 14: retina-suffix}̲.#{fallback-extension}); } } }
使用方法
body { @include background-image(‘pattern’); }
4、Animations 和 keyframes
在插件CSS3 Animations动画的时候需要添加各种浏览器厂商前缀的代码。通过这个mixin你可以只使用几行代码就完成这些工作。
@mixin keyframes($animation-name) { @-webkit-keyframes $animation-name { @content; } @-moz-keyframes $animation-name { @content; } @-ms-keyframes $animation-name { @content; } @-o-keyframes $animation-name { @content; } @keyframes $animation-name { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; } 使用方法 @include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; } } .element { width: 100px; height: 100px; background: black; @include animation(‘slide-down 5s 3’); }
5、Transitions
和animations一样，CSS transitions在使用的时候也要添加很多浏览器厂商的前缀，同样可以通过一个mixin来简化这些操作。
@mixin transition($args…) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args; }
使用方法
a { color: gray; @include transition(color .3s ease); &:hover { color: black; } }
6、跨浏览器的透明度设置
这个mixin可以可以制作出兼容 Internet Explorer 5 的跨浏览器透明度效果。
@mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //IE8 } 使用方法 .faded-text { @include opacity(0.8); }
7、清除浮动（Clearfix）
在网上有各种不同的clearfix hacks方法。这里使用的方法是由Nicolas Gallagher设计的，这种清除浮动的方法能兼容IE6+的浏览器。
%clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
