css之sass混合函数方法

// 引入scss变量文件
@import "./variable.scss";

/*===================================================================
    变量前缀为$ ,方法前缀为_
====================================================================*/

//---背景颜色样式输出
@mixin _bgColor($bg:$c_white) {
    background-color: $bg;
}

//---文字渐变技巧
@mixin _gradientText() {
    background-color: #DA4AF3;
    background-image: linear-gradient(116deg, #FF9800 0%, #ff2a6b 33%, #fb2bf6 58%, #9e3dff 78%, #5f3df7 90%, #2b83ff 100%);
    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 300% 100%; 
    // -webkit-animation: masked-animation 5s linear infinite alternate; 
    -webkit-animation: masked-animation 5s linear infinite; 
}

//---显示方式
@mixin _display($arg:block) {
    display: $arg;
}
    
//---隐藏
@mixin _box__hide(){
    display: none;
}

//---显示
@mixin _box__show(){
    display: block;
}
    
//---边框线
@mixin _borderAll($color:$c_border,$pixel:1px,$bstyle:solid){
    border: $pixel $bstyle $color;
}
// 使用...展开符
@mixin _borderCustom($border...){
    border: $border;
}
// 使用#{$var} 插值
@mixin _border($direction,$color:$c_border,$pixel:1px,$bstyle:solid){
    border-#{$direction}: $pixel $bstyle $color;
}

//---严格盒模型
@mixin _boxSizing($fn:1) {
    @if $fn == 1 {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    @else {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
}

//---垂直居中布局
@mixin _verticalLayout($left:0,$right:auto,$position:absolute){
    position: $position;
    top: 0;
    bottom: 0;
    left: $left;
    right: $right;
    margin: auto;
}

//---完全居中布局
@mixin _completeCenter($left:0,$right:0,$top:0,$bottom:0,$position:absolute){
    position: $position;
    top: $top;
    bottom: $bottom;
    left: $left;
    right: $right;
    margin: auto;
}
    
//---垂直文本对齐
// baseline    默认。元素放置在父元素的基线上。
// sub 垂直对齐文本的下标。
// super   垂直对齐文本的上标
// top 把元素的顶端与行中最高元素的顶端对齐
// text-top    把元素的顶端与父元素字体的顶端对齐
// middle  把此元素放置在父元素的中部。
// bottom  把元素的顶端与行中最低的元素的顶端对齐。
// text-bottom 把元素的底端与父元素字体的底端对齐。
// length
// %   使用 "