scss 經常使用mixin

// 1. 佈局

// 固定定位, 兼容IE6
@mixin fixed {
  position: fixed;
  _position: absolute;
  *zoom: 1;
}

// 水平豎直方向居中-translate
@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

// 水平豎直方向居中-flex
@mixin flex-center($w, $h) {
  @include flex;
  align-items: center;
  justify-content: center;
}

//水平豎直方向居中-margin
@mixin know-center($w, $h) {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -($w/2);
  margin-top: -($h/2);
}

// 吸頂導航
@mixin fix-header($h: 70px) {
  @include fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $h;
  z-index: 1000;
}

// 吸底導航
@mixin fix-footer($h: 70px) {
  @include fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: $h;
  z-index: 1000;
}

// 浮動, 兼容 IE6
@mixin fl {
  float: left;
  *display: inline;
  _display: inline;
}

@mixin fr {
  float: right;
  *display: inline;
  _display: inline;
}

// 清除浮動
@mixin clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
}

// 彈性盒
@mixin flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

// IE盒模型
@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// 尺寸
@mixin size($w, $h) {
  width: $w;
  height: $h;
}

// 最小尺寸, 兼容IE6
@mixin min-width($min-w) {
  min-width: $min-w;
  _width: $min-w;
}

@mixin min-height($min-h) {
  min-height: $min-h;
  _height: $min-h;
}

// 全屏大圖背景
@mixin fullscreen-bg($url) {
  width: 100vw;
  height: 100vh;
  background: url($url) no-repeat 50% 50%;
  background-size: cover;
}

// 2. 文本
// 禁止文本被選擇
@mixin user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// 文字超出顯示省略號
@mixin ellipsis {
  /*加寬度width屬來兼容部分瀏覽*/
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

//文字超出幾行顯示省略號
@mixin ellipsis-multi($line) {
  //     display: -webkit-box; //將對象做爲彈性伸縮盒子模型顯示
  //   -webkit-box-orient: vertical; //設置或檢索伸縮盒對象的子元素的排列方式
  //   -webkit-line-clamp: 3; //用來限制在一個塊元素顯示的文本的行數
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

// 美化文本選中 ::selection
@mixin beauty-select($color, $bgcolor) {
  &::selection {
    color: $color;
    background-color: $bgcolor;
  }
}

// 美化佔位符 placeholder 樣式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
  &:-moz-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &:-ms-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &::-webkit-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
}

// 隔行換色
@mixin zebra-lists($evenColor, $evenBgColor, $oddColor, $oddBgColor) {
  &:nth-child(2n) {
    color: $evenColor;
    background-color: $evenBgColor;
  }
  &:nth-child(2n + 1) {
    color: $oddColor;
    background-color: $oddBgColor;
  }
}

// 首字下沉
@mixin first-letter($font-size: 6em) {
  &::first-letter {
    float: left;
    line-height: 1;
    font-size: $font-size;
  }
}

//keyframes
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
      @content;
  }
  @-moz-keyframes #{$animationName} {
      @content;
  }
  @-o-keyframes #{$animationName} {
      @content;
  }
  @keyframes #{$animationName} {
      @content;
  }
}

// 3. 圖片
// 濾鏡: 將彩色照片顯示爲黑白照片、保留圖片層次
@mixin grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
// 模糊  毛玻璃效果
@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);

  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}

// 鼠標禁用樣式，但仍然能夠觸發事件
@mixin disabled {
  cursor: not-allowed;
}

// 4.圖形

// 三角形
@mixin triangle($width: 4px, $color: #000) {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: $width solid $color;
  border-left: $width solid transparent;
  border-right: $width solid transparent;
}

複製代碼