SCSS公共样式文件整理

项目中常用的样式可以提取公共的样式文件，这样在使用时就可以直接引用，方便快捷~
也方便在日后改版，改主题色调，直接改公共的样式文件就ok了~

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

// 滚动条样式
%scrollbar{
    &::-webkit-scrollbar{
        // 滚动条整体部分，其中有属性 width、height、background、border等（和块元素一样）
        width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-track-piece{
        // 内层轨道，滚动条中间部分
        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，欢迎来评论区里留言，感谢您对知识的无私奉献~
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。