常用minxins

//透明度
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
@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 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);
}

发布了62 篇原创文章 · 获赞 9 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_37026254/article/details/88821865