uni-app项目实战笔记11--定义scss颜色变量方便页面引用

在完成项目创建后，uniapp为我们创建了一个全局的uni.scss文件，里边定义了一些颜色，字体大小的变量，我们可以在项目中直接引用：

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

使用时只需直接使用名称即可，如$uni-color-primary。

我们也可以定义一些样式，然后在uni.scss中引入，注意引入需要这样写才生效：

@import "@/common/style/base-style.scss";

前面的@/不可少，要以英文分号结尾。如果页面中引入了自定义的样式，uni.scss也正确引入了，需要把HBuilder X项目重新启动才会生效，要不然会报错。

页面中<style>中的样式可直接使用名称进行引用：

color: $brand-theme-color;

但是在html中定义的颜色，比如像下面的代码：

<uni-icons type="calendar" size="18" color="#28B389"></uni-icons>

则不能直接使用$brand-theme-color来引用，需要在<style>中定义样式才能使用颜色变量，

color:$brand-theme-color;

如果像上面替换了不起作用，有可能是行内样式，被覆盖了(调试时会发现样式代码被横线划掉)，可以使用!import来提高权重让设置生效：

color:$brand-theme-color !important;

但该种方式在H5页面可以生效，在微信小程序却不生效，需要使用deep深度穿透来让设置生效：

:deep(){.uni-icons{color:$brand-theme-color !important;}	

:deep() 的作用

在 Vue 3 的 <style scoped> 或 微信小程序自定义组件的样式隔离 环境下，默认无法直接修改子组件的样式。

:deep() 是一个样式穿透选择器，允许绕过样式隔离，强制影响子组件内部的样式。