十个有用的Sass Mixins_html/css_WEB-ITnose

Sass是世界上最成熟、最稳定、强大而又专业的CSS预处理器。我使用Sass有相当长的一段时间了。发现Sass的Mixins对于任何前端开发人员都非常有用，可以帮助前端开发人员节省很多时间，而且能更好的利用。

Sass的Mixins可以让你声明任何可重用的CSS代码块。你甚至可以通过传值，使用你的Mixins更佳灵活。它让前端开发人员节省了大量的时间，确保前端人员写出来的代码不会冗余而且便于组织和管理代码。

我推荐使用Compass,因为他创建了很多有用的Mixins，简化了前端开发人员的很多工作。

1、浏览器前缀

来源于：Useful Sass (SCSS) mixin Snippets

SCSS:

@mixin css3($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        #{$prefix}#{$property}: $value;    }}

使用：

.border_radius {  @include css3(transition, 0.5s);}

CSS:

.border_radius {  -webkit-transition: 0.5s;  -moz-transition: 0.5s;  -ms-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

2、响应式断点

来源于：Handy Sass Mixins

SCSS:

@mixin breakpoint($point) {  @if $point == large {    @media (min-width: 64.375em) { @content; }  }  @else if $point == medium {    @media (min-width: 50em) { @content; }  }  @else if $point == small {    @media (min-width: 37.5em) { @content; }  }}

使用：

.page-wrap {  width: 75%;  @include breakpoint(large) {     width: 60%;   }  @include breakpoint(medium) {     width: 80%;   }  @include breakpoint(small) {     width: 95%;   }}

CSS:

.page-wrap {  width: 75%;}@media (min-width: 64.375em) {  .page-wrap {    width: 60%;  }}@media (min-width: 50em) {  .page-wrap {    width: 80%;  }}@media (min-width: 37.5em) {  .page-wrap {    width: 95%;  }}

3、Retina图片

来源于：Easy retina-ready images using SCSS

SCSS

@mixin image-2x($image, $width, $height) {  @media (min--moz-device-pixel-ratio: 1.3),         (-o-min-device-pixel-ratio: 2.6/2),         (-webkit-min-device-pixel-ratio: 1.3),         (min-device-pixel-ratio: 1.3),         (min-resolution: 1.3dppx) {            /* on retina, use image that's scaled by 2 */            background-image: url($image);            background-size: $width $height;  }}

使用：

div.logo {  background: url("logo.png") no-repeat;  @include image-2x("logo2x.png", 100px, 25px);}

CSS:

div.logo {  background: url("logo.png") no-repeat;}@media (min--moz-device-pixel-ratio: 1.3),        (-o-min-device-pixel-ratio: 2.6 / 2),        (-webkit-min-device-pixel-ratio: 1.3),        (min-device-pixel-ratio: 1.3),        (min-resolution: 1.3dppx) {        div.logo {            /* on retina, use image that's scaled by 2 */            background-image: url("logo2x.png");            background-size: 100px 25px;        }}

4、清除浮动

来源：A new micro clearfix hack

SCSS:

@mixin clearfix() {  &:before,  &:after {    content: "";    display: table;  }  &:after {    clear: both;  }}

使用：

.article {  @include clearfix();}

CSS:

.article:before, .article:after {  content: "";  display: table;}.article:after {  clear: both;}

5、Black和White

来源：Useful SASS Mixins

SCSS:

@function black($opacity){  @return rgba(0,0,0,$opacity)}@function white($opacity){  @return rgba(255,255,255,$opacity)}

特别声明，上面这个不属于Sass的Mixins范畴，是Sass的自定义函数功能。

使用：

.my-class{  background:black(0.15);  color:white(0.9);}

CSS:

.my-class {  background: rgba(0, 0, 0, 0.15);  color: rgba(255, 255, 255, 0.9);}

6、内阴影和外阴影

来源：Useful SASS Mixins

SCSS:

@mixin box-emboss($opacity, $opacity2){  box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;}

使用:

.box{  @include box-emboss(0.8, 0.05);}

CSS:

.box {  box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}

7、透明度

来源：Handy Sass Mixins

SCSS:

@mixin opacity($opacity) {  opacity: $opacity;  $opacity-ie: $opacity * 100;  filter: alpha(opacity=$opacity-ie); //IE8}

使用：

.article-heading {  @include opacity(0.8);}

CSS:

.article-heading {  opacity: 0.8;  filter: alpha(opacity=80);}

8、绝对定位

来源：Handy Sass Mixins

SCSS:

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {  top: $top;  right: $right;  bottom: $bottom;  left: $left;  position: absolute;}

使用：

.abs {  @include abs-pos(10px, 10px, 5px, 15px);}

CSS:

.abs {  top: 10px;  right: 10px;  bottom: 5px;  left: 15px;  position: absolute;}

9、行高

来源：Handy Sass Mixins

SCSS:

@mixin line-height($heightValue: 12 ){  line-height: $heightValue + px; //fallback for old browsers  line-height: (0.125 * $heightValue) + rem;}

使用：

body {  @include line-height (16);}

CSS:

body {  line-height: 16px;  line-height: 2rem;}

10、图片标题动画

来源：4 useful SASS mixins

SCSS:

@mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) {  display:inline-block;  position:relative;  overflow:hidden;  & img {    display:block;    width:100%;    height:auto;  }  & span.outer {    display:block;    width:100%;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    padding:$padding;    color:$font-color;    position:absolute;    bottom:-100px;    -webkit-transition: bottom $transition-speed ease;    -moz-transition: bottom $transition-speed ease;    -o-transition: bottom $transition-speed ease;    -ms-transition: bottom $transition-speed ease;    transition: bottom $transition-speed ease;    & span.inner{      margin:0px;      position:relative;    }    &:before{      content: " ";      display:block;      position:absolute;      z-index:0;      left:0px;      top:0px;      width:100%;      height:100%;      background:$bg-color;      filter: alpha(opactiy=($bg-opacity * 100));      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity * 100})";      -moz-opacity: $bg-opacity;      -khtml-opacity: $bg-opacity;      opacity: $bg-opacity;    }  }  &:hover span.outer{    bottom:0px;  }}

使用：

a{  @include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)}

CSS:

a {  display: inline-block;  position: relative;  overflow: hidden;}a img {  display: block;  width: 100%;  height: auto;}a span.outer {  display: block;  width: 100%;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  padding: 10px;  color: #ffffff;  position: absolute;  bottom: -100px;  -webkit-transition: bottom 0.5s ease;  -moz-transition: bottom 0.5s ease;  -o-transition: bottom 0.5s ease;  -ms-transition: bottom 0.5s ease;  transition: bottom 0.5s ease;}a span.outer span.inner {  margin: 0px;  position: relative;}a span.outer:before {  content: " ";  display: block;  position: absolute;  z-index: 0;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  background: #333333;  filter: alpha(opactiy=75);  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";  -moz-opacity: 0.75;  -khtml-opacity: 0.75;  opacity: 0.75;}a:hover span.outer {  bottom: 0px;}

注：这个Mixins如果在实际项目中，可以配合其它的Mixins更简单些。