常用scss占位符、混合宏mixin及引用方法

水平居中

// Center-align a block level element
// block得有宽度margin左右为auto才能居中
// 引用：@extend %center-block;
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
%center-block{
  @include center-block;
}

绝对居中

// 引用：@include center();、@include center(100px,100px);、@include center(100px,null);
@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  overflow: hidden;

  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($height / 2) #{0 0} -($width / 2);
  } @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
  }
}

浮动

// 引用：@extend %fl;
// float left & right
@mixin fl($float:left) {
  float: $float;
}
%fl{
  @include fl;
}
// 引用：@extend %fr;
// float left & right
@mixin fr($float:right) {
  float: $float;
}
%fr{
  @include fr;
}

闭合子元素浮动

// 引用：@extend %clearfix;
$lte7:                  false !default; //是否兼容ie6-7
@mixin clearfix {
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
%clearfix{
  @include clearfix;
}

单行文本溢出显示省略号

// 引用： @extend %ellipsis-basic;
// 元素可以设置宽度才可应用省略号
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
@mixin ellipsis($width:100%) {
  @extend %ellipsis-basic;
  width:$width;
}

三角符号

// 引用：@include triangle(bottom,10px,#f2f2f2);
// @include triangle(top,20px,#f2f2f2);
// @include triangle(left,20px,#f2f2f2);
// @include triangle(right,20px,#f2f2f2);
// 三角符号
%triangle-basic{
  content:"";
  height: 0;
  width: 0;
  overflow:hidden;
}
@mixin triangle($direction, $size, $borderColor ) {
  @extend %triangle-basic;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } 
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

移动端字体大小设置

@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

渐变

// 水平渐变，从左往右
// @include gradient-horizontal(#333, #ccc);
@mixin gradient-horizontal($gradient...){
  background-image: -webkit-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $gradient); // Opera 11.10
  background-image: linear-gradient(to right, $gradient); // Standard, IE10
}
// 水平渐变，从左往右，平铺
// @include gradient-horizontal-repeating(#333 5%, #ccc 10%);
@mixin gradient-horizontal-repeating($gradient...){
  background-image: -webkit-repeating-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-repeating-linear-gradient(left, $gradient); // Opera 11.10
  background-image: repeating-linear-gradient(to right, $gradient); // Standard, IE10
}
// 垂直渐变，从上往下
// @include gradient-vertical(#333 30%, #ccc);
@mixin gradient-vertical($gradient...) {
  background-image: -webkit-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $gradient); // Opera 11.10
  background-image: linear-gradient(to bottom, $gradient); // Standard, IE10
}
// 垂直渐变，从上往下，平铺
// @include gradient-vertical-repeating(#333 30%, #ccc 50%);
@mixin gradient-vertical($gradient...) {
  background-image: -webkit-repeating-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-repeating-linear-gradient(top, $gradient); // Opera 11.10
  background-image: repeating-linear-gradient(to bottom, $gradient); // Standard, IE10
}
// 角度渐变
// @include gradient-angle(45deg, #333 30%, #ccc);
@mixin gradient-angle($gradient...) {
  background-image: -webkit-linear-gradient($gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient($gradient); // Opera 11.10
  background-image: linear-gradient($gradient); // Standard, IE1
}
// 角度渐变
// @include gradient-angle(45deg, #333 30%, #ccc 50%);
@mixin gradient-angle-repeating($gradient...) {
  background-image: -webkit-repeating-linear-gradient($gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-repeating-linear-gradient($gradient); // Opera 11.10
  background-image: repeating-linear-gradient($gradient); // Standard, IE1
}
// 径向渐变，可以写点简单的
// 如：@include gradient-radial(#00F,#FFF);
// 而@include gradient-radial(farthest-side circle at right,#00F,#FFF);这种的将不会兼容，所以不要调用这个，可以去找工具生成
@mixin gradient-radial($gradient...){
  background-image: -webkit-radial-gradient($gradient); // Safari 5.1+, Chrome 10+
  background-image: -o-radial-gradient($gradient); // Opera 11.10
  background-image: radial-gradient($gradient); // Standard, IE1
  background-repeat: no-repeat;
}

单行文本超出显示省略号

// 元素可以设置宽度才可应用省略号
// 引用： @extend %ellipsis-basic
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

lt8使用filter兼容

// 引用 @include opacity(60)
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}

px换算成rem

// 引用 font-size: pxToRem(32);padding: pxToRem(20) pxToRem(30) pxToRem(10);
$browser-default-font-size: 75px !default;
@function strip-units($number){
  @return $number / ($number * 0 + 1);
}
@function pxToRem($px){
  @return ($px/strip-units($browser-default-font-size))+rem;
}