Vue3 使用 Sass/Scss

1. 安装依赖

yarn add sass sass-loader -D

2. 使用

<style scoped lang="scss">
    .shift-css {
        padding: 3px 7px;
        color: #fff;
        border-radius: 5px;
    }

    .head-container {
        margin-top: 1vh;
        display: flex;

        .shift-time {
            flex: 1;
            padding-right: 2vw;
            text-align: right;
            display: flex;
            justify-content: right;
            align-items: center;

            div {
                margin-right: 0.5vw;
                display: inline-block;

                span {
                    font-size: 14px;
                }
            }

            .shift {
                /* & 用法：此处表示 .shift-morning */
                &-morning {
                    /* 使用 @extend 引用 .shift-css */
                    @extend .shift-css;
                    background: #409eff;
                }

                &-afternoon {
                    @extend .shift-css;
                    background: rgb(230, 162, 60);
                }

                &-evening {
                    @extend .shift-css;
                    background: #67c23a;
                }
            }
        }
    }

    tbody td span {
        padding: 0.02vh 0.3vw;
        font-size: 0.9em;
        /* 动态 css 样式，html 中使用 <span :style="{'--span-bg-color': item.color}">{{ item.name }}</span> */
        background-color: var(--span-bg-color);
        border-color: var(--span-bg-color);
        color: #ffffff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        height: 24px;
        line-height: 1;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
        --el-icon-size: 14px;
    }

    tbody td div span:not(:first-child) {
        margin-top: 0.4vh !important;
    }
    
</style>