scss 常用 mixin

远方的远zeal
1,063 阅读2分钟

清除浮动

// 清除浮动
@mixin clearfix {
  &:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }

  *height: 1%;
}

圆角

// 圆角
// $radius - 半径
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
  -moz-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
}

@mixin top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  -moz-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
}

@mixin bottom-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  -moz-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
}

@mixin bottom-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  -moz-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
}

渐变

// 渐变
// 线性渐变多层
// $linearGradient - 渐变参数
@mixin linear-gradient-multiple($linearGradient...) {
  background: -webkit-linear-gradient($linearGradient); // Safari 5.1 - 6.0
  background: -o-linear-gradient($linearGradient); //Opera 11.1 - 12.0
  background: -moz-linear-gradient($linearGradient); // Firefox 3.6 - 15
  background: linear-gradient($linearGradient); //标准的语法
}

// 线性渐变
// $colorStop1 - 过渡色1
// $colorStop2 - 过渡色2
// $angle - 方向
@mixin linear-gradient($colorStop1,$colorStop2,$angle:to bottom) {
  @include linear-gradient-multiple($angle, $colorStop1, $colorStop2);
}

阴影

// 阴影
// $h - 水平移值
// $v - 垂直移值
// $vage - 阴影模糊值
// $extende - 阴影外延值
// $color - 颜色
@mixin box-shadow($h,$v,$vage,$extende,$color) {
  -webkit-box-shadow: $h $v $vage $extende $color;
  -o-box-shadow: $h $v $vage $extende $color;
  -moz-box-shadow: $h $v $vage $extende $color;
  box-shadow: $h $v $vage $extende $color;
}

跨浏览器的透明度设置

// 跨浏览器的透明度设置
// $opacity - 透明度
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

文本溢出省略显示

// 文本溢出省略显示
// 单行文本溢出省略显示
@mixin text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文本溢出省略显示，支持 WebKit浏览器或移动端的页面
// $row - 行数
@mixin text-ellipsis-multiple($row) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $row;
  -webkit-box-orient: vertical;
}

盒子模型

// 盒子模型
// $box-sizing - 盒子模型
@mixin box-sizing( $box-sizing:content-box) {
  -moz-box-sizing: $box-sizing;
  -webkit-box-sizing: $box-sizing;
  -o-box-sizing: $box-sizing;
  -ms-box-sizing: $box-sizing;
  box-sizing: $box-sizing;
}

像素边框

// 像素边框-上
// $c - 颜色
@mixin top-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleY(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleY(0.333333333);
  }
}

// 像素边框-下
// $c - 颜色
@mixin bottom-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid $c;
  color: $c;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleY(0.333333333);
  }
}

// 像素边框-左
// $c - 颜色
@mixin left-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid $c;
  color: $c;
  transform-origin: 0 0;
  transform: scaleX(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleX(0.333333333);
  }
}

// 像素边框-右
// $c - 颜色
@mixin right-line($c: #c7c7c7) {
  content: ' ';
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid $c;
  color: $c;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    transform: scaleX(0.333333333);
  }
}

// 像素边框-上下左右
// $c - 颜色
@mixin line($c: #c7c7c7, $border-radius: 0) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid $c;
  color: $c;
  transform-origin: left top;
  @if ($border-radius != 0) {
    border-radius: $border-radius * 2;
  }
  transform: scale(0.5);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    @if ($border-radius != 0) {
      border-radius: $border-radius * 3;
    }
    width: 300%;
    height: 300%;
    transform: scale(0.333333333);
  }
}

// 一像素上边框
// $color - 颜色
@mixin border-top-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include top-line($color);
  }
}

// 一像素下边框
// $color - 颜色
@mixin border-bottom-1px($color: #c7c7c7) {
  position: relative;
  &:after {
    @include bottom-line($color);
  }
}

// 一像素上下边框
// $color - 颜色
@mixin border-top-bottom-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include top-line($color);
  }
  &:after {
    @include bottom-line($color);
  }
}

// 一像素左边框
// $color - 颜色
@mixin border-left-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include left-line($color);
  }
}

// 一像素右边框
// $color - 颜色
@mixin border-right-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include right-line($color);
  }
}

// 一像素左右边框
// $color - 颜色
@mixin border-left-right-1px($color: #c7c7c7) {
  position: relative;
  &:before {
    @include left-line($color);
  }
  &:after {
    @include right-line($color);
  }
}

// 一像素边框
// $color - 颜色
// $position - 定位
// $border-radius - 圆角
@mixin border-1px($color: #c7c7c7, $position: relative, $border-radius: 0) {
  position: $position;
  &:after {
    @include line($color, $border-radius);
  }
}

三角形

// 三角形
// $direction - 方向
// $size - 大小
// $color - 背景色
@mixin triangle($direction: down, $size: 5px, $color: #f96001) {
  width: 0px;
  height: 0px;
  @if ($direction == left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  } @else if ($direction == right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  } @else if ($direction == down) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  } @else if ($direction == top) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}

居中-定位

// 居中-定位
// $position - 定位方式
@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    transform: translateY(-50%);
  } @else if $position == 'horizontal' {
    left: 50%;
    transform: translateX(-50%);
  } @else if $position == 'both' {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

弹性盒子

// 弹性盒子
@mixin display-flex() {
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
}

@mixin flex() {
  -webkit-flex: 1; /* Chrome */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1; /* OLD - Firefox 19- */
}
avatar
文章
阅读
粉丝