几个实用的Sass mixins

发表于 2016年07月31日
前端

Mixins 是 Sass (其实很多预处理语言都有) 中用来方便地复用代码的方法，你可以简单点理解成函数，返回的是一组 CSS 属性或代码。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius(10px); }

上面的代码处理后，将得到下面 CSS 代码。

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.box {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

如果你对 Sass 不熟悉，可以先去学习一番，让我们进入主题，介绍几个实用的 mixins。

Absolute Position

如果你的页面中经常用到 absolute 定位，你可以试试下面这个：

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

@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);
}

.abs {

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

}

产出

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

.abs {

top: 10px;

right: 10px;

bottom: 5px;

left: 15px;

position: absolute;

}

带有优雅降级地使用 rem 单位

熟悉 rem 单位的前端er是否遇到过不支持的浏览器？你如何解决的呢？下面这个 mixin 我们加上 px 单位作 fallback：

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

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@function calculateRem($size: 16) {

$remSize: $size / 16px;

@return $remSize * 1rem;

}

@mixin font-size($size) {

font-size: $size;

font-size: calculateRem($size);

}

使用

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

p {

@include font-size(14px)

}

产出

p {
  font-size: 14px;
  font-size: 0.8rem;
}

p {

font-size: 14px;

font-size: 0.8rem;

}

Clearfix

网上有很多 clearfix 的 hacks，下面这种比较常见，兼容到 IE6以上

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

@mixin clearfix() {

&:before,

&:after {

content: "";

display: table;

}

&:after {

clear: both;

}

使用

.container {
  @include clearfix();
}

.container {

@include clearfix();

}

When-inside

个人比较中意的 mixin，常用在修改元素在不同状态下的属性。比如我们的H5页面会给当前页面加个 active类名，我们想让当前页面中的 foo对象执行动画。

/// Make a context based selector a little more friendly
/// @author Hugo Giraudel
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

/// Make a context based selector a little more friendly

/// @author Hugo Giraudel

/// @param {String} $context

@mixin when-inside($context) {

#{$context} & {

@content;

}

使用

.foo {
  @include when-inside('.active') {
    animation: fadeIn 0.3s 1s forwards;
  }
}

.foo {

@include when-inside('.active') {

animation: fadeIn 0.3s 1s forwards;

}

产出

.active .foo {
  animation: fadeIn 0.3s 1s forwards; 
}

.active .foo {

animation: fadeIn 0.3s 1s forwards;

}

方便的媒体查询

媒体查询再做响应式网站时候，非常方便。如果下面的代码满足不了你的需求的话，那么推荐你看之前的文章《使用Sass之更高级的媒体查询》

$breakpoints: (
  'sm': 'only screen and  (min-width: 480px)',
  'md': 'only screen and ( min-width: 768px)',
  'lg': 'only screen and ( min-width: 992px)'
) !default;


@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);
  
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}

$breakpoints: (

'sm': 'only screen and (min-width: 480px)',

'md': 'only screen and ( min-width: 768px)',

'lg': 'only screen and ( min-width: 992px)'

) !default;

@mixin respond-to($breakpoint) {

$query: map-get($breakpoints, $breakpoint);

@if not $query {

@error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';

}

@media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {

@content;

}

用法

.foo {
  @include respond-to('sm') {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.foo {

@include respond-to('sm') {

padding-left: 20px;

padding-right: 20px;

}

产出

@media only screen and (min-width: 480px) {
  .foo {
    padding-left: 20px;
    padding-right: 20px; 
  } 
}

@media only screen and (min-width: 480px) {

.foo {

padding-left: 20px;

padding-right: 20px;

}

长阴影

这个mixin可能不常用，但是效果真的很酷~

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

@function makelongshadow($color) {

$val: 0px 0px $color;

@for $i from 1 through 200 {

$val: #{$val}, #{$i}px #{$i}px #{$color};

}

@return $val;

}

@mixin longshadow($color) {

text-shadow: makelongshadow($color);

}

使用

h1 {
  @include longshadow(darken($color, 5% ));
}

h1 {

@include longshadow(darken($color, 5% ));

}

精灵图

之前写过一篇关于 Gulp 生成精灵图的文章，里面的 mixin 也很实用

@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}