十個有用的Sass Mixins

Sass是世界上最成熟、最穩定、強大而又專業的CSS預處理器。我使用Sass有至關長的一段時間了。發現Sass的Mixins對於任何前端開發人員都很是有用，能夠幫助前端開發人員節省不少時間，並且能更好的利用。

Sass的Mixins可讓你聲明任何可重用的CSS代碼塊。你甚至能夠經過傳值，使用你的Mixins更佳靈活。它讓前端開發人員節省了大量的時間，確保前端人員寫出來的代碼不會冗餘並且便於組織和管理代碼。

我推薦使用Compass,由於他建立了不少有用的Mixins，簡化了前端開發人員的不少工做。

一、瀏覽器前綴

來源於：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;}

二、響應式斷點

來源於：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%;
  }}

三、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;
        }}

四、清除浮動

來源：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;}

五、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);}

六、內陰影和外陰影

來源：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;}

七、透明度

來源：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);}

八、絕對定位

來源：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;}

九、行高

來源：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;}

十、圖片標題動畫

來源：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更簡單些。