广东品牌网站设计专家樱花bt引擎

        scss为css样式的预编译器，引入了变量、嵌入、混合、集成、引入等功能，相对于css样式，实现了样式的编程，具有更灵活的样式编写模式。

        那么在HBuilderx中，“.vue”格式页面如何调用scss样式呢？详细如下：

        1、首先创建一个“.scss”格式的文件，用于写scss样式，如下

        $uni-button-bg-color: #30a2a4;
        // 使用变量及混合（Mixins）
        @mixin button-styles($bg-color) {
                  background-color: $bg-color;
                  padding: 10px 20px;
                  border-radius: 5px;
        }

        2、创建一个".vue"格式文件，用于写scss样式

（1）<template></template>

（2）<script></script>

（3）<style lang="scss"></style>

首先，<style lang="scss">中，lang="scss"必须写，否则引用变量无效；

其次，要引入步骤1创建的scss文件，即@import  "@/uni.scss";

然后，就可以使用scss文件定义的样式了，例如：

background-color:  $uni-button-bg-color;
color: $uni-text-color;

vue页面详细如下图所示：