項目中常用的樣式可以提取公共的樣式文件，這樣在使用時就可以直接引用，方便快捷~
也方便在日后改版豹爹，改主題色調(diào)，直接改公共的樣式文件就ok了~

// 寬高
@mixin wh($width, $height) {
    width: $width;
    height: $height;
}

// 滾動條樣式
%scrollbar{
    &::-webkit-scrollbar{
        // 滾動條整體部分矛纹，其中有屬性 width帅戒、height、background崖技、border等（和塊元素一樣）
        width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-track-piece{
        // 內(nèi)層軌道逻住，滾動條中間部分
        background: $c101;
    }
    &::-webkit-scrollbar-thumb{
        // 滾動條里可以拖動的部分
        background: $c121;
        border-radius: 4px;
    }
}

// flex布局 默認居中
@mixin flexLayout($center1: center, $center2: center) {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: $center1; // flex-start | flex-end | center | space-between | space-around
    align-items: $center2; // flex-start | flex-end | center | baseline | stretch
}

// position居中
@mixin positionCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

// 文本超出隱藏 ...隱藏文本
@mixin sinleline-ellipsis($width: 100%) {
    width: $width;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文本最多(n)行，超出部分用...表示
@mixin line($num) {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}

// 透明度 兼容IE8
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); // IE8
}

// 正三角形
// $direction -> top | bottom | left | right
@mixin triangle($width, $height, $color, $direction ) { 
    $width: $width/2;
    $border-style: $height solid $color;
    $transparent-border: $width solid transparent;
    height: 0; 
    width: 0; 

    @if $direction == top { 
        border-bottom: $border-style; 
        border-left: $transparent-border; 
        border-right: $transparent-border; 
    } @else if $direction == right { 
        border-left: $border-style; 
        border-top: $transparent-border; 
        border-bottom: $transparent-border; 
    } @else if $direction == bottom { 
        border-top: $border-style; 
        border-left: $transparent-border; 
        border-right: $transparent-border; 
    } @else if $direction == left { 
        border-right: $border-style; 
        border-top: $transparent-border; 
        border-bottom: $transparent-border; 
    } 
}

// 字體編碼
@mixin Title1{
    @content;
    font-size: 24px;
    font-weight: bold;
}
@mixin Title2{
    @content;
    font-size: 20px;
    font-weight: bold;
}
@mixin body1{
    @content;
    font-size: 12px;
}
@mixin body2{
    @content;
    font-size: 14px;
}
@mixin body3{
    @content;
    font-size: 16px;
}

// 顏色編碼
$c100: #fff;
$c101: #000;
$c121: #212121;

PS：這是我對常用樣式的整理迎献，如果大家還有可以提成公共樣式的 idea瞎访，歡迎來評論區(qū)里留言，感謝您對知識的無私奉獻~
如果本文對你有所幫助吁恍，感謝點一顆小心心扒秸，您的支持是我繼續(xù)創(chuàng)作的動力！
最后：寫作不易冀瓦，如要轉(zhuǎn)裁伴奥，請標明轉(zhuǎn)載出處。