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); }
上面的代码处理后，将得到下面 CSS 代码。
.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;
}使用
.abs {
@include abs-pos(10px, 10px, 5px, 15px);
}产出
.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);
}使用
p {
@include font-size(14px)
}产出
p {
font-size: 14px;
font-size: 0.8rem;
}网上有很多 clearfix 的 hacks，下面这种比较常见，兼容到 IE6以上
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}使用
.container {
@include clearfix();
}个人比较中意的 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;
}
}使用
.foo {
@include when-inside('.active') {
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;
}
}用法
.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;
}
}长阴影
这个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);
}使用
h1 {
@include longshadow(darken($color, 5% ));
}效果
精灵图
之前写过一篇关于 Gulp 生成精灵图的文章，里面的 mixin 也很实用，《http://www.w3ctrain.com/2015/12/09/generating-sprites-with-gulp/》
@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);
}
}
}总结
以上内容均为整理及实践总结而来，可能不是最优解，如果你又更好的想法，欢迎与我交流~ 用好 mixin 或许可以让你省去大量重复性工作，空出大把时间，为升职加薪迎娶白富美走上人生巅峰做梦去吧。
更多细化的 mixin 看相关内容中的链接。
相关内容
如需转载，请注明出处: w3ctrain.com/2016/02/21/… ，欢迎加入前端Q群（ 467969149 ）
