sass 公用10个mixins代码块

---

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(#{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);

}