分享我Scss常用的代码片段

包含Mixin圆角、背景图、渐变、阴影、清除浮动、边框、三角等

//mixin.scss

@import "./utils.scss";

/*
 	* 作用：背景图片地址和大小
	* 示例：@include back(url);
*/

@mixin back($url, $size: 100% 100%) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: $size;
}

/*
	* 作用：盒模型
	* 示例：@include box;
*/

@mixin box($sing: border-box) {
  -webkit-box-sizing: $sing;
  -moz-box-sizing: $sing;
  box-sizing: $sing;
}

/*
	* 作用：圆角
	* 示例：@include radius;
*/

@mixin radius($radius: 10px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

/*
	* 作用：定位全屏
	* 示例：@include allcover;
*/

@mixin allcover {
  position: absolute;
  top: 0;
  right: 0;
}

/*
	* 作用：定位垂直水平居中
	* 示例：@include center;
*/

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
	* 作用：定位默认左上
	* 示例：@include lt;
*/

@mixin lt($left: 0, $top: 0, $position: absolute) {
  position: $position;
  left: $left;
  top: $top;
}

/*
	* 作用：定位默认右上
	* 示例：@include rt;
*/

@mixin rt($right: 0, $top: 0, $position: absolute) {
  position: $position;
  right: $right;
  top: $top;
}

/*
	* 作用：定位默认左下
	* 示例：@include lb;
*/

@mixin lb($left: 0, $bottom: 0, $position: absolute) {
  position: $position;
  left: $left;
  bottom: $bottom;
}

/*
	* 作用：定位默认右下
	* 示例：@include rb;
*/

@mixin rb($right: 0, $bottom: 0, $position: absolute) {
  position: $position;
  right: $right;
  bottom: $bottom;
}

/*
	* 作用：定位上下居中
	* 示例：@include ct;
*/

@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/*
	* 作用：定位左右居中
	* 示例：@include cl;
*/

@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/*
	* 作用：设置宽高 (默认宽高百分比)
	* 示例：@include wh;
*/

@mixin wh($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
}

/*
	* 作用：设置字体大小、行高、颜色、对齐方式;
	* 示例：@include font(20px,30px,#cccccc,center);
*/

@mixin font($size, $line-height, $color, $align: left) {
  font-size: $size;
  line-height: $line-height;
  color: $color;
  text-align: $align;
}

/*
	* 作用：flex布局 及 子元素对齐方式
	* 示例：@include flex;
*/

@mixin flex($type: space-between) {
  display: flex;
  justify-content: $type;
}

/*
	* 作用：溢出显示点点点 (默认一行)
	* 示例：
			@include line;
			@include line(3);
*/

@mixin line($num: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if ($num == 1) {
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
  }
}

/*
	* 作用：默认阴影
	* 示例：@include shadow;
*/

@mixin shadow($radius: 10px, $shadow: 0 4px 20px rgba(0, 0, 0, 0.1)) {
  box-shadow: $shadow;
  @include radius($radius);
}

/*
	* 作用：清除浮动
	* 使用：@include clearfix;
*/

@mixin clearfix {
  &:after,
  &:before {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

/*
	* 作用：去除滚动条 (仅支持的是webkit内核的浏览器)
	* 使用：@include no-scrollbar;
*/

@mixin no-scrollbar {
  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    opacity: 0 !important;
  }
}

/*
 * 一像素边框
 * $direction: 边框方向，默认底边框
 * $style: 线条样式，默认solid
 * $color: 边框颜色
 * 
 * 默认下边框 @include one-border;
 */
@mixin one-border($direction: bottom, $style: solid, $color: #e5e5e5) {
  position: relative;
  $border: 1px $style $color;
  @if ($direction == bottom) {
    &:after {
      @include onepxTopBottom;
      @include setDprBorder(tb);
      border-top: $border;
      bottom: 0;
    }
  } @else if ($direction == top) {
    &:before {
      @include onepxTopBottom;
      @include setDprBorder(tb);
      border-top: $border;
      top: 0;
    }
  } @else if ($direction == left) {
    &:before {
      @include onepxLeftRight;
      @include setDprBorder(lr);
      border-left: $border;
      left: 0;
    }
  } @else if ($direction == right) {
    &:after {
      @include onepxLeftRight;
      @include setDprBorder(lr);
      border-left: $border;
      right: 0;
    }
  }
}

// 四边一像素边框
@mixin full-border($color: #e5e5e5, $radius: 0, $zIndex: -1) {
  position: relative;
  z-index: 1;
  &:before {
    content: "";
    position: absolute;
    z-index: $zIndex;
    border: 1px solid $color;
    width: 200%;
    height: 200%;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: top left;
    border-radius: $radius * 2;
    left: 0;
    top: 0;
  }
}

/*
	* 作用：px转rem
	* 
	* 示例：两种使用方法
		@include px2rem(height, 400px);
  		@include px2rem(width, 200px);
  		margin: px2rem(10px);
*/

@mixin px2rem($attr, $num, $base: 37.5) {
  $list: (); //存储所有转换后的值

  // 遍历所有值并转换为rem单位
  @for $i from 1 through length($num) {
    // 计算单个rem值
    $value: strip-units(nth($num, $i)) / $base * 1rem;
    // 添加到列表中
    $list: append($list, $value);
  }

  // 设置属性值
  #{$attr}: $list;
}

@function px2rem($num, $base: 37.5) {
  @return strip-units($num) / $base * 1rem;
}

/*
	*	作用：简单的渐变
	*
	*   示例：
	  	@include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), vertical);
	  	@include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), radius)
*/

@mixin background-gradient($start-color, $end-color, $orientation: vertical) {
  background: $start-color;

  @if $orientation == vertical {
    background: linear-gradient(to bottom, $start-color, $end-color);
  } @else if $orientation == horizontal {
    background: linear-gradient(to right, $start-color, $end-color);
  } @else {
    background: radial-gradient(ellipse at center, $start-color, $end-color);
  }
}

/*
	* 作用：三角
	* 示例：@include triangle(left, 10px);
*/

@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 {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
}

// utils.scss 是 mixin.scss 所需要用的辅助方法

@mixin onepxElement {
  content: '';
  position: absolute;
}

@mixin onepxTopBottom {
  @include onepxElement;
  left: 0;
  right: 0;
}

@mixin onepxLeftRight {
  @include onepxElement;
  top: 0;
  bottom: 0;
}

@mixin setDprBorder($direction: tb) {
  @for $i from 1 through 4 {
    @media screen and (-webkit-min-device-pixel-ratio: $i) {
      @if ($direction == tb) {
        transform: scaleY(1 / $i);
      } @else if($direction == lr) {
        transform: scaleX(1 / $i);
      } @else if($direction == full) {
        transform: scale(1 / $i);
      }
    }
  }
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

附：

小兀666大佬的分享常用的CSS函数，助你写出更简洁的代码