scss官方文档

基本用法

变量和嵌套

一个定义div颜色的小demo如下：

<template>
    <div class = 'container'>
        <div class="primary">primary</div>
        <div class="secondary">secondary</div>
    </div>
</template>

<style lang="scss">
$primary-color: #007bff;
$secondary-color: #6c757d;
.container {
    .primary{
        color: $primary-color;
    }
    .secondary{
        color: $secondary-color;
    }
}

scss的赋值方法和调用方法都非常简单，在变量名字前加上$符号即可。同时，scss也支持多种变量格式，不仅仅是上述的颜色，对于数组，也以非常简单的形式进行定义：

$dates: monday, saturday, tuesday, thursday

插值语句和循环

假设我们现在有一个网页，网页分为若干个模块，每个模块背景颜色都不一样，除此之外，样式没有任何别的区别，下面是一个实现的小demo：

<template>
    <div class="container">
        <div v-for="color in colors" :key = 'color'>
            <div :class="`container-${color}`">
                网页内容
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
type Color = 'green' | 'yellow' | 'red' | 'pink' | 'white'
const colors = ref<Color[]>(['green','yellow', 'red', 'pink', 'white'])

</script>

<style lang="scss">
$colors : green, yellow, red, pink, white;
.container{
    @each $bgColor in $colors {
        .container-#{$bgColor} {
            background-color: $bgColor;
        }
    }
}

</style>

实现效果：

同v-for循环生成DOM元素一样，scss的@each in也可以循环生成样式。也可以从上面看出，html的插值表达式是{{}},js和vue中v-bind插值表达式是${}，css的插值表达式是#{}。