uni-app中scss语法初体验。

1.首先检测一下你有没有安装scss语言，任意一个.vue页面写入lang="scss"声明。

<style lang="scss" scoped>
    
</style>

2.如果没有安装，会提示如下信息，去插件市场安装一个就好。

如果你用的是HbuilderX编辑器。

3.依此找到--菜单栏--工具--插件安装--安装新插件--前往插件市场安装--在搜索框输入scss--点击安装

图片教程：

scss语法好处：

1.可以嵌套写css样式
我们可以测试下：
基本框架：

<template>
    <view class="container">
        <view class="box">
            <text>昨夜星辰昨夜风</text>
            <button type="default">生成</button>
        </view>
    </view>
</template>

scss语法体验：

<style lang="scss" scoped>
    .container {
        height: 750rpx;
        width: 750rpx;
        background-color: #3F536E;
        .box {
            height: 375upx;
            width: 375upx;
            .text {
                font-size: 60upx;
                color: white;
            }
            button {
                background-color: #4CD964;
            }
        }
    }
</style>

效果预览：

uni.scss文件中

以$符号命名一个全局变量名称。

在其他.vue页面的样式中调用这个全局变量名。