常用Sass mixins总结

透明度

@mixin opacity($opacity) {

  opacity: $opacity;

  $opacity-ie: $opacity * 100;

  filter: alpha(opacity=$opacity-ie); //IE8

}

@function calculateRem($size) {

  $remSize: $size / 100px;

  @return $remSize * 1rem;

}

//字体rem转换

@mixin font-size($size) {

  font-size: $size;

  font-size: calculateRem($size);

}

@mixin transition($args...) {

  -webkit-transition: $args;

  -moz-transition: $args;

  -ms-transition: $args;

  -o-transition: $args;

  transition: $args;

}

//禁用样式

@mixin disabled($bgColor, $textColor) {

  background-color: $bgColor !important;

  color: $textColor !important;

  cursor: not-allowed !important;

}

//阴影

@mixin box-shadow($shadow...) {

  -webkit-box-shadow: $shadow;

  -moz-box-shadow: $shadow;

  box-shadow: $shadow;

}

/*

三角形

direction 方向

size 大小

borderColor 颜色

*/

@mixin triangle($direction, $size, $borderColor) {

  content: "";

  height: 0;

  width: 0;

  display: block;

  @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 radius($radius) {

  -webkit-border-radius: calculateRem($radius);

  -moz-border-radius: calculateRem($radius);

  border-radius: calculateRem($radius);

}

// 居中

@mixin center {

  display: flex;

  justify-content: center;

  align-items: center;

}

// 清除浮动

@mixin clearfix() {

  &:before,

  &:after {

    content: "";

    display: table;

  }

  &:after {

    clear: both;

  }

}

// 多行文本溢出省略显示

@mixin text-ellipsis($num) {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: $num;

  -webkit-box-orient: vertical;

}

/**

  *imageSrc 路径

  *width 宽度

  *height 高度

*/

@mixin bgImg($imageSrc, $width, $height, $position: center, $repeat: no-repeat) {

  background: url($imageSrc) $repeat $position;

  background-size: calculateRem($width) calculateRem($height);

}