常用SASS封装

结合Compass库和工作总结，列出了项目中最为常用的SASS片段。内容收集于网络，我进行了简单整理并测试正常，可以根据实际项目情况进行取舍，值得学习或直接应用，感谢！

//重置浏览器默认样式
@import "compass/reset";

//使用粘滞页脚
@import "compass/layout/sticky-footer";
<div id="main">
    <div id="main-footer"></div>
</div>
<div id="footer">
    Footer content goes here.
</div>
@include sticky-footer(54px, "#main", "#main-footer", "#footer");

// Github: https://github.com/zenozeng/fonts.css    @extend %font-hei;     通用字体的处理方法
%font-hei {
    font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN Normal", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
%font-kai {
    font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW\-Kai", serif;
}
%font-song {
    font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif;
}
%font-fang-song {
    font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
}
%font-ming {
    font-family: Georgia, "Nimbus Roman No9 L", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
}

// Compass最常用的一些模块
@import "compass/css3/background-size";      //@include background-size; default > background-size:100% auto;
@import "compass/css3/border-radius";        //@include border-radius; default > border-radius:5px;
@import "compass/css3/box-shadow";           //@include box-shadow; default > box-shadow:0px 0px 5px #333333;
@import "compass/css3/box-sizing";           //@include box-sizing(border-box);
@import "compass/css3/inline-block";         //@include inline-block;
@import "compass/css3/opacity";              //@include opacity(.4);

// 设置宽高
@mixin size($width, $height:$width){
    width: $width;
    height: $height;
}

// rgba的兼容处理方案
@mixin backgroundTransparent($bgcolor,$opacity,$support-for-ie:true){
    background-color:rgba($bgcolor,$opacity);
    @if $support-for-ie{
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))},endColorstr=#{ie-hex-str(rgba($bgcolor,$opacity))});
        :root & {
            filter:none;
        }
    }
}

// @include boxCenter(center,false);使用css3 box-align/box-pack水平垂直居中
@mixin boxCenter($pack:center, $align: center) {
    @if($align !=false) {
        -webkit-box-align: $align;
        box-align: $align;
    }
    @if($pack !=false) {
        -webkit-box-pack: $pack;
        box-pack: $pack;
    }
    display:-webkit-box;
    display:box;
}

//@include boxClamp(3); >> suitable Mobile and no height        多行超出设置点点点，适用于webkit内核的浏览器
@mixin boxClamp($v:1){
    overflow:hidden;
    -webkit-line-clamp: $v;
    line-clamp: $v;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    display:-webkit-box;
    display:box;
}

//Button Sizes        按钮，具体使用时具体修改
@mixin button-size($padding,$line-height,$border-radius){
    padding: $padding;
    line-height: $line-height;
    border-radius: $border-radius;
}

//Thanks http://codepen.io/zhouwenbin/pen/xbVjPb  面包屑（两头）
//<span class="breadcrumb-right">breadcrumb</span>   @include breadcrumb(#425164,#fff,16px,left);

//http://lugolabs.com/caret          各种三角，这个网址可以手动调整并在线实时预览
//@include caret(absolute,9px,3px,right,red,#fff);

//@include center-translate($direction: both);    利用translate可以实现未知宽高的东东水平/垂直居中
@mixin center-translate($direction: both) {
    position: absolute;
    @if $direction == both {
        top: 50%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }
    @else if $direction == horizontal {
        left: 50%;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    @else if $direction == vertical {
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

//@include ellipsis-overflow;    文字溢出点点点
@mixin ellipsis-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

//@include float;  浮动
@mixin float($direction: left,$support-for-ie:false){
    float: $direction;
    @if $support-for-ie{
        _display: inline;
    }
}

//@include inline-block;  行内元素display:inline-block;的兼容方案
@mixin inline-block($alignment: middle,$support-for-ie:true) {
    display: inline-block;
    @if $alignment and $alignment != none {
        vertical-align: $alignment;
    }
    @if $support-for-ie {
        *vertical-align: auto;
        zoom: 1;
        *display: inline;
    }
}

//@include opacity;  opacity的兼容方案
@mixin opacity($opacity:.65,$support-for-ie:true) {
    opacity: $opacity;
    @if $support-for-ie{
        $opacity-ie: $opacity * 100;
        filter: alpha(opacity=$opacity-ie); //IE8
    }
}

//@include position(absolute,top 10px right 20px bottom 20px left 20px);  suitable no width/no height
@mixin position($position,$args){
    @each $o in top right bottom left {
        $i: index($args, $o);
        @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
            #{$o}: nth($args, $i + 1);
        }
    }
    position: $position;
}

//Thanks: https://github.com/bitmanic/rem/blob/master/stylesheets/_rem.scss by @benfrain (https://github.com/benfrain)

//Thanks http://codepen.io/zhouwenbin/pen/bNpMov  single arrow