sass 公用10个mixins代码块

1、使用rem设置字体尺寸并使用像素进行回退

rem和em类似，都是一种CSS测量单位，但是它不是相对于父元素的尺寸，而是相对于HTML文档的根元素设置元素的尺寸大小。

由于rem在设置元素尺寸的时候是相对于HTML根元素的尺寸，而不是他的父元素的设置，因此在使用上不会发生混乱的情况。但是由于在IE8及以下版本的IE浏览器中不支持rem属性，因此我们必须在这些浏览器中使用像素为单位来创建回退代码。

@function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

使用方法

p { @include font-size(14px) }

输出结果

p { font-size: 14px; //如果浏览器不支持rem将使用这个规则进行覆盖 font-size: 0.8rem; }

2、Breakpoints

Sass 3.2开始允许开发者在使用媒体查询（media queries）时使用定义的名称，这使得代码看起来清晰得多。作为@media (min-width: 600px)等代码的替代，它使用了更有语义的名称形式，如“breakpoint-large”或“breakpoint-a-really-large-computer-machine”。

@mixin bp-large { @media only screen and (max-width: 60em) { @content; } } @mixin bp-medium { @media only screen and (max-width: 40em) { @content; } } @mixin bp-small { @media only screen and (max-width: 30em) { @content; } }

使用方法

.sidebar { width: 60%; float: left; margin: 0 2% 0 0; @include bp-small { width: 100%; float: none; margin: 0; } }

输出结果

.sidebar { width: 60%; float: left; margin: 0 2% 0 0; @media only screen and (max-width: 30){ .sidebar{width: 100%; float: none; margin: 0;} } }

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(#{$image-path}/#{$name}.svg); @if($size){ background-size: $size; } .no-svg &{ background-image: url(#{$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(#{$image-path}/#{$name}#{$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; } }

使用方法

.container-with-floated-children { @extend %clearfix; }

8、隐藏元素

当你使用display: none来隐藏一个元素的时候，屏幕阅读设备还是会将这个元素读出来。有时候这不是我们想要的结果。我们需要另一种方法来隐藏元素。 在这里我们将使用Sass placeholder selector，使用继承的方法来使用代码，这样不会产生大量的重复代码。

%visuallyhidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; }

使用方法

<button class="mobile-navigation-trigger"> <b class="visually-hidden">Open the navigation</b> <img src="img/mobile-navigation-icon.svg"> </button> .visually-hidden { @extend %visuallyhidden; }

9、省略号

@mixin AddDot{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

10、居中

@mixin positionAb($x , $y){ position: absolute; left:50%; top:50%; width: $x; height: $y; margin-left:-$x/2; margin-top:-$y/2; z-index:99; }

小结

本文中介绍了10种非常有用的Sass mixin。通过这些mixin可以大大的简化你的开发工作，你可以将这些mixin作为工具保存起来，以备不时之需。