十个有用的 SassMixins

Question

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 更简单些。

扩展阅读

• Snippet Sunday – Sass Mixins
• 8 Sass mixins you must have in your toolbox
• Useful SASS Mixins
• Useful Sass (SCSS) mixin Snippets
• Handy Sass Mixins
• Compass mixins you should know about
• 10 SCSS utilities I can’t live without
• Useful Sass Mixins for Responsive Design, Font Sizing and More

结论

Sass 中的 Mixins 在实际开发中能帮助我们做非常多的事情，可以说是一劳永逸。可以将所有的Mixins放置在 _mixins.scss 文件中，需要的时候直接调用即可。大家可以将自己看到的，在使用的，觉得好的Mixins收集起来。慢慢的，你将会有很多优秀的Mixins，而这些Mixins就可以帮你做很多的事情，节省很多时间，让你做更多有意义的事情。