15 essential Sass mixins

100
TaoAlpha2014-11-177372 words22 minutes to read

Source:

15 个必备的Sass mixins

现在有很多成套的sass mixin库, 比如我个人很喜欢的 Bourbon和非常流行的 Compass. 但是有时候, 实际上是多数情况下, 可能从中选一些结合自己的mixin才是最适合自己的.

过于依赖一个工具总是不好的, 而且如果你想让sass的mixin通过@include来调用的话, 那么你就更应该试着写写自己的mixin了~

sass的mixin的应用范围是非常广泛的, 而以下这15个mixin则是每个开发者都应该有的:

box-sizing

sass就像所有的预处理器一样, 能够很好的处理浏览器前缀的. 下面这个mixin是用于处理box-sizing这个前缀的:

1
2
3
4
5
6
7
@mixin box-sizing($type)
 {
 -webkit-box-sizing:$type;
 -moz-box-sizing:$type;
 box-sizing:$type;
 }
</code>

用法很简单:

1
2
3
4
div{
    @include box-sizing(border-box);
}
</code>

Opacity 除了浏览器前缀之外, 还让人无比反感但又经常使用的就是透明度的问题了, 尤其是老版本的IE. 下面这个mixin则可以帮助你解决这个问题:

1
2
3
4
5
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity=($opacity * 100));
 }
</code>

用法也很简单:

1
2
3
4
div {
@include opacity(0.5);
}
</code>

column-width

这又是一个mixin处理浏览器前缀的极好例子:

1
2
3
4
5
@mixin column-width ( $value: 150px ) {
 -webkit-column-width: $value;
  -moz-column-width: $value;
  column-width: $value;
 }

用法很简单:

1
2
3
div{
 @include column-width(150px);
 }

circle

一旦你为 border-radius做了mixin后, 你就可以在其他的mixin中使用它了, 下例就是典型:

1
2
3
4
@mixin circle
 {
 @include border-radius(100%);
 }

用法很简单:

1
2
3
div {
 @include circle();
 }

font-size

Mixin对于边试边调是极好的, 下例的font-size的mixin就可以通过简单的修改rem来调整字体大小了, 而rem也仅会在支持它的浏览器中起作用.

1
2
3
4
@mixin font-size($size) {
 font-size:$size;
 font-size: ($size / 16px) * 1rem;
 }

用法很简单:

1
2
3
div {
 @include font-size(14px);
 }

box-shadow

同样还是处理浏览器前缀问题的:

1
2
3
4
5
@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
  -webkit-box-shadow: $h $v $b $s $c;
  -moz-box-shadow: $h $v $b $s $c;
  box-shadow: $h $v $b $s $c;
}

用法很简单:

1
2
3
div {
 @include box-shadow(8px, 8px);
 }

xPos

你还可以使用mixin来简化代码, 下面例子就是让你把元素沿横轴定位时使用:

1
2
3
4
5
6
@mixin xPos($x){
 -webkit-transform:translateX($x);
 -moz-transform:translateX($x);
 -ms-transform:translateX($x);
 transform:translateX($x);
 }

用法很简单:

1
2
3
div {
 @include xPos(50px);
 }

vertical-align

纵向居中一个元素是很费劲的一件事, 不过下面这个mixin则可以给你很大的帮助:

1
2
3
4
5
6
7
@mixin vertical-align {
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 }

用法很简单:

1
2
3
div {
 @include vertical-align();
 }

flexbox

mixin在处理类似flexbox的问题时非常有效: .

1
2
3
4
5
6
7
@mixin flexbox{
 display:-webkit-box; // old
 display:-moz-box; // old
 display:-ms-flexbox; // ie
 display:-webkit-flex; // new
 display:flex; // new
 }

用法很简单:

1
2
3
div {
 @include flexbox();
 }

flex

一旦通过mixin设定 display 属性为 flex, 那么你就也需要一个mixin来设定 flex 属性了:

1
2
3
4
5
6
7
@mixin flex($values) {
 -webkit-box-flex: $values;
 -moz-box-flex: $values;
 -ms-flex: $values;
 -webkit-flex: $values;
 flex: $values;
 }

用法很简单:

1
2
3
div {
 @include flex(1, 2);
 }

flex-order

再加一个设定order的:

1
2
3
4
5
6
7
@mixin flex-order($order){
 -webkit-box-ordinal-group: $order; // old
 -moz-box-ordinal-group: $order; // old
 -ms-flex-order: $order; // ie
 -webkit-order: $order; // new
 order: $order; // new
 }

用法很简单:

1
2
3
div {
 @include flex-order(3);
 }

flex-direction

mixin也是支持sass中的 @if, @else if, 以及 @else 等语句的, 可以用来把2个不同的mixin合并到一起:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@mixin flex-direction($direction){
 @if $direction == column
 {
 -webkit-flex-direction:vertical;
 -moz-flex-direction:vertical;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 flex-direction:column;
 }
 @else
 {
 -webkit-flex-direction:horizontal;
 -moz-flex-direction:horizontal;
 -ms-flex-direction:row;
 -webkit-flex-direction:row;
 flex-direction:row;
 }
 }

用法很简单:

1
2
3
div {
 @include flex-direction(column);
 }

gradient

代码尽量要简单, 不过在必要的时候, mixin比较臃肿也是情有可原的.下面这个例子是为不同浏览器设定渐变效果的mixin, 只需要3个参数就能实现很好的渐变效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@mixin gradient($start-color, $end-color, $orientation){
 background: $start-color;
 @if $orientation == vertical
 {
 // vertical
 background: -moz-linear-gradient(top, $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(top, $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(top, $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(top, $start-color 0%,$end-color 100%);
 background: linear-gradient(to bottom, $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
 }
 @else if $orientation == horizontal
 {
 // horizontal
 background: -moz-linear-gradient(left, $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(left, $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(left, $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(left, $start-color 0%,$end-color 100%);
 background: linear-gradient(to right, $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 @else
 {
 // radial
 background: -moz-radial-gradient(center, ellipse cover, $start-color 0%, $end-color 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
 background: -o-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
 background: -ms-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
 background: radial-gradient(ellipse at center, $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 }

用法很简单:

1
2
3
div {
 @include gradient(#ff00ff, #ff00cc, vertical);
 }

ghost-button

如果你想要紧随潮流的话, 你可以利用下面这个mixin来创建一个 ghost button, 上面的例子是我们几周前做的. 通过 &:hover 属性可以让我们指定其hover的状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@mixin ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color){
 display:inline-block;
 text-decoration:none;
 text-transform:uppercase;
 font-family: $font;
 font-size: $font-size;
 color:$font-color;
 border:$border-size solid $border-color;
 padding:$padding;
 -webkit-transition: color $transition-speed, background $transition-speed;
 transition: color $transition-speed, background $transition-speed;
 &amp;:hover
 {
 background:$border-color;
 color:$hover-color;
 }
 }

用法很简单:

1
2
3
div {
 @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );
 }

break-point

通过使用 @content 语句, 我们甚至可以把内容也加入include中去, 在此基础上建立断点. 当然你不应该仅仅根据设备尺寸来设定断点, 不过下面的例子中还是简单的分为了PC和手机端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin break-point($point)
 {
 @if $point == desktop{
 @media only screen and (max-width:50em)
 {
 @content;
 }
 }
 @else if $point == mobile{
 @media only screen and (max-width:20em)
 {
 @content;
 }
 }
 }

用法很简单:

1
2
3
4
5
6
7
div {
 margin:5em;
 @include break-point(mobile)
 {
 margin:2em;
 }
 }
readings译系列翻译文章codingSassMixin

Related Posts: