mixin.scss
//-----------------------------------浏览器前缀----------------------------------------- //例子：@include css3(transition, 0.5s); @mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { #{$prefix}#{$property}: $value; } } //-----------------------------------Retina图片----------------------------------------- @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; } } //-----------------------------------清除浮动----------------------------------------- //引用例子：@include clearfix(); @mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } } //-----------------------------------Black和White----------------------------------------- //特别声明，上面这个不属于Sass的Mixins范畴，是Sass的自定义函数功能。 //background:black(0.15); //color:white(0.9);} @function black($opacity) { @return rgba(0, 0, 0, $opacity) } @function white($opacity) { @return rgba(255, 255, 255, $opacity) } //-----------------------------------内阴影和外阴影----------------------------------------- //引用例子:@include box-emboss(0.8, 0.05); @mixin box-emboss($opacity, $opacity2) { box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0; } //-----------------------------------行高----------------------------------------- //引用例子:@include line-height (16); @mixin line-height($heightValue: 12) { line-height: $heightValue + px; //fallback for old browsers line-height: (0.125 * $heightValue) + rem; } //-----------------------------------隐藏文字----------------------------------------- //引用例子： //.logo{ // background: url("logo.png"); // height:100px; // width:200px; // @include hide-text; //} @mixin hide-text { overflow: hidden; text-indent: -9000px; display: block; } //-----------------------------------响应式断点----------------------------------------- //引用例子： //@include breakpoint(large) { // width: 60%; //} //@include breakpoint(medium) { // width: 80%; //} //@include breakpoint(small) { // width: 95%; //} @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; } } } //-----------------------------------正三角----------------------------------------- //正三角的通用属性 %triangleBase { _font-size: 0; _line-height: 0; _overflow: hidden; width: 0; height: 0; } //regulaTriangle:正三角(dashed默认透明) //例子：@include regulaTriangle(top,red); @mixin regulaTriangle($derection:bottom, $color: #000, $width: 20px) { @extend %triangleBase; border-width: $width; //向右 @if $derection==right { border-style: dashed dashed dashed solid; border-color: transparent transparent transparent $color; } //向左 @if $derection==left { border-style: dashed solid dashed dashed; border-color: transparent $color transparent transparent; } //向上 @if $derection==top { border-style: dashed dashed solid dashed; border-color: transparent transparent $color transparent; } //向下 @if $derection==bottom { border-style: solid dashed dashed dashed; border-color: $color transparent transparent transparent; } } //-----------------------------------直角三角形----------------------------------------- //right-angledTriangle:直角三角形 //例子：@include right-angledTriangle(1,red); @mixin right-angledTriangle ($derection:1, $color:#000, $width: 20px, $opacity:transparent, $border:dashed) { @extend %triangleBase; border-width: $width; //向右 @if $derection==1 { border-style: $border dashed dashed $border; border-color: $color $opacity $opacity $color; } //向右 @if $derection==2 { border-style: $border $border dashed dashed; border-color: $color $color $opacity $opacity; } //向右 @if $derection==3 { border-style: dashed $border $border dashed; border-color: $opacity $color $color $opacity; } //向右 @if $derection==4 { border-style: dashed dashed $border $border; border-color: $opacity $opacity $color $color; } } //-----------------------------------圆角----------------------------------------- //radius:圆角 //例子：@include radius(24,100%); @mixin radius($num:1234, $size: 5px) { @if $num==1234 { -webkit-border-radius: $size; //Saf3+, Chrome -moz-border-radius: $size; //FF1+ border-radius: $size; //Opera 10.5, IE 9 -ms-border-radius: $size; } @if $num==12 { -webkit-border-top-left-radius: $size; border-top-left-radius: $size; -webkit-border-top-right-radius: $size; border-top-right-radius: $size; -moz-border-top-left-radius: $size; -ms-border-top-left-radius: $size; -moz-border-top-right-radius: $size; -ms-border-top-right-radius: $size; } @if $num==23 { -webkit-border-top-right-radius: $size; border-top-right-radius: $size; -webkit-border-bottom-right-radius: $size; border-bottom-right-radius: $size; -moz-border-top-right-radius: $size; -moz-border-bottom-right-radius: $size; -ms-border-top-right-radius: $size; -ms-border-bottom-right-radius: $size; } @if $num==34 { -webkit-border-bottom-right-radius: $size; border-bottom-right-radius: $size; -webkit-border-bottom-left-radius: $size; border-bottom-left-radius: $size; -moz-border-bottom-left-radius: $size; -moz-border-bottom-right-radius: $size; -ms-border-bottom-left-radius: $size; -ms-border-bottom-right-radius: $size; } @if $num==14 { -webkit-border-top-left-radius: $size; border-top-left-radius: $size; -webkit-border-bottom-left-radius: $size; border-bottom-left-radius: $size; -moz-border-top-left-radius: $size; -moz-border-bottom-left-radius: $size; -ms-border-top-left-radius: $size; -ms-border-bottom-left-radius: $size; } @if $num==13 { -webkit-border-top-left-radius: $size; -webkit-border-bottom-right-radius: $size; -ms-border-top-left-radius: $size; -ms-border-bottom-right-radius: $size; border-top-left-radiu: $size; -moz-border-top-left-radius: $size; border-bottom-right-radiu: $size; -moz-border-bottom-right-radius: $size; } @if $num==24 { -webkit-border-top-right-radius: $size; border-top-right-radius: $size; -webkit-border-bottom-left-radius: $size; border-bottom-left-radius: $size; -moz-border-top-right-radius: $size; -moz-border-bottom-left-radius: $size; -ms-border-top-right-radius: $size; -ms-border-bottom-left-radius: $size; } } //-----------------------------------边框阴影----------------------------------------- //boxshadow:边框阴影 //例子：@include boxshadow(24,100%); @mixin boxshadow($x: 3px, $y: 3px, $shadowcolor: #cccccc) { -moz-box-shadow: $x $y 4px $shadowcolor; // FF3.5+ -webkit-box-shadow: $x $y 4px $shadowcolor; // Saf3.0+, Chrome box-shadow: $x $y 4px $shadowcolor; // Opera 10.5, IE 9.0 filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}')"; /* IE8 */ } //-----------------------------------透明度----------------------------------------- //myOpacity:透明度 //例子：@include myOpacity(0.3,93,197,16); @mixin myOpacity($opacity:0.5, $r:0, $g:0, $b:0) { $xx: $opacity * 100; filter: alpha(opacity=$xx); background-color: rgba($r, $g, $b, $opacity); // rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色.两种都不被IE支持(IE9开始支持) //如果要兼容ie文字不透明，需要用元素把文字包裹起来，然后色值position：relative或者absolute。 //opacity: $opacity;//opacity属性是css3的属性，也可以实现透明效果，跟background-color: rgba同样效果。 } //-----------------------------------透明度----------------------------------------- //引用例子:@include opacity(0.8); @mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //IE8 } //-----------------------------------动画keyframes生成----------------------------------------- //动画keyframes生成 //例子：@include keyframes(动画名称); //@include keyframes(move-the-object) { // 0% { // transform: translateX(0); // } // 100% { // transform: translateX(200px); // } //} @mixin keyframes($animationName) { @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @-o-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } } .