【scss】样式用法_scss函数样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44481113/article/details/134176244

文章详细介绍了Sass变量和一系列混合器的使用，如flex布局、过渡效果、滚动条样式以及文本省略处理，展示了如何在index.scss中导入并应用var.scss中的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var.scss 公共scss

@use "sass:math";
$base_vm: 1920;

@function vm($px) {
    @return $px * 1px;
}

@mixin flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@mixin flex-start-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

@mixin flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@mixin flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin flex-stretch {
    display: flex;
    justify-content: stretch;
    align-items: center;
}

@mixin flex-col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@mixin flex-col-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

@mixin flex-col-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

@mixin hover-highlight {
    transition: filter 0.25s ease-in-out;

    &:hover {
        filter: brightness(1.15);
    }
}

@mixin scroll {
    &::-webkit-scrollbar {
        width: vm(8);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgb(white, 0.25);
    }

    &::-webkit-scrollbar-track {
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
    }
}

@mixin scroll-hover {
    &::-webkit-scrollbar {
        width: vm(7);
        height: vm(7);
    }


    &::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0);
    }

    &::-webkit-scrollbar-track {
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
    }

    &::-webkit-scrollbar-corner {
        background: transparent;
    }

    &:hover {
        &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.5);
        }
    }
}

@mixin ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

$standard: #00D92E;
$unstandard: #FFCC00;
$null: #6b6b6b;

$smallWidgetW: vm(333);
$smallWidgetH: vm(130);
$smallMiddleWidgetW: vm(333);
$smallMiddleWidgetH: vm(217);
$longWidgetW: vm(686);
$longWidgetH: vm(130);
$middleWidgetW: vm(686);
$middleWidgetH: vm(197);
$bigWidgetW: vm(686);
$bigWidgetH: vm(242);
$largeWidgetW: vm(686);
$largeWidgetH: vm(310);
$hugeWidgetW: vm(686);
$hugeWidgetH: vm(403);
$widgetSizeMap: (
    small: $smallWidgetW $smallWidgetH vm(10),
    smallMiddle: $smallMiddleWidgetW $smallMiddleWidgetH vm(10),
    long: $longWidgetW $longWidgetH vm(10),
    middle: $middleWidgetW $middleWidgetH vm(4),
    big: $bigWidgetW $bigWidgetH vm(10),
    large: $largeWidgetW $largeWidgetH vm(10),
    huge: $hugeWidgetW $hugeWidgetH vm(10),
    )

$steps: 50-1;

@keyframes loading_gif {
    @for $i from 1 through $steps {
        #{ math.div(100,$steps)*$i * 1%} {
            background-position: 0 vm(-120)*$i;
        }
    }
}

scss文件的使用
index.scss

@import 'styles/var.scss';   //var.scss文件的导入 
div { 
       @include flex-col-start; // 使用var.scss文件里面的flex-col-start
}

:deep 用法

:deep(.el-step__main) {
  position: relative;
  top: -40px;
  left: 35px;
}