css 变量（自定义属性）实际应用（CRM based Vue）_scss #{$--header-height}

css 变量的定义与使用

以 "--" 作为属性名的开始，通过 var(变量名) 使用变量。

.app {
    --base-color: #323232;    // 定义
}
 
 
.app .container {
    background-color: var(--base-color)    // 使用
}

实际应用

场景：菜单的展开与折叠。

<!-- layout/index.vue -->
<template>
    <div>
        <el-container :style="{'--sidebar-width': sidebarWidth+'px'}">
            <!-- 侧边菜单 -->
            <el-aside>
                <Sidebar @switchCollaps="switchCollaps" />
            </el-aside>
 
            <el-container>
                <!-- 头部 -->
                <el-header>
                    <Header />
                </el-header>
                <!-- 内容区域 -->
                <el-main>
                    <div class="view-container">
                        <router-view />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
 
<script>
    import Header from './header.vue';
    import Sidebar from './sidebar.vue';
 
    export default {
        components: {
            Header,
            Sidebar
        },
 
        data () {
            return {
                sidebarWidth: 200
            }
        },
 
        methods: {
            switchCollaps (collaps) {
                this.sidebarWidth = collaps ?  40 : 240;
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    $header-height: 56px;
    $base-dis: 16px;
    
    .el-aside {
        width: var(--sidebar-width) !important;
    }
    .el-header {
        height: $header-height !important;
        box-shadow: 0px 1px 0px 0px #EEEEEE;
        z-index: 1;       
        overflow: hidden;
        padding: 0 $base-dis;
    }
    .el-main {
        background-color: rgb(245, 245, 245);
        padding: $base-dis;
        height: calc(100vh - #{$header-height});
        overflow: auto;
 
        .view-container {
            box-sizing: border-box;
            padding: $base-dis;
            background-color: #fff;
        }
    }
</style>

<!-- layout/header.vue -->
<template>
    <div class="header flex">
        <div class="location">
            location
        </div>
        <div class="info flex">
            <ul class="flex">
                <li>公告</li>
                <li>消息</li>
            </ul>
            <div class="info-user flex">
                <i class="el-icon-s-custom"></i>
                <div class="info-user-name">
                    <p>wzm</p>
                    <p class="permission">admin</p>
                </div>
            </div>
        </div>
    </div>
</template>
 
<style lang="scss" scoped>
    $base-color: #006186;
    $header-height: 56px;
    $base-dis: 16px;
 
    .flex {
        display: flex;
    }
    .header {
        background-color: #fff;
        justify-content: space-between;
 
        .location {
            line-height: $header-height;
        }
 
        .info {
            ul {
                list-style: none;
                display: flex;
                line-height: $header-height;
                margin-right: 2 * $base-dis;
 
                li {
                    padding: 0 $base-dis;
                    cursor: pointer;
                }
            }
 
            &-user {
                align-items: center;
 
                i {
                    color: $base-color;
                    font-size: 26px;
                    margin-right: $base-dis/2;
                }
 
                &-name {
                    .permission {
                        font-size: 12px;
                        color: rgb(139, 131, 131);
                    }
                }
            }
        }
    }
</style>

<!-- layout/sidebar.vue -->
<template>
    <div class="sidebar">
        <div class="sidebar-top">
            <div v-if="!isCollapse" class="sidebar-top-title"> vue-element-pre </div>
            <div>
                <i 
                    :class="{
                        'el-icon-s-unfold': isCollapse, 
                        'el-icon-s-fold': !isCollapse
                    }"
                    @click="switchCollaps"
                ></i>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data () {
            return {
                isCollapse: false
            }
        },
 
        methods: {
            switchCollaps () {
                this.isCollapse = !this.isCollapse;
                this.$emit('switchCollaps', this.isCollapse);
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    $base-color: #006186;
    $base-dis: 16px;
    $top-w-h: 40px;
    
    .sidebar {
        height: 100vh;
        background-color: $base-color;
        color: #fff;
        // padding: $base-dis;
 
        &-top {
            display: flex;
            justify-content: space-between;
 
            &-title {
                height: $top-w-h;
                line-height: $top-w-h;
                padding-left: $base-dis;
            }
 
            i {
                cursor: pointer;
                width: $top-w-h;
                height: $top-w-h;
                display: flex;
                justify-content: center;
                align-items: center;
                
                &:hover {
                    background-image: linear-gradient(to right, $base-color, #4191b1);
                }
            }
        }
    }
</style>