如何自己开发一个网站,网络广告推广服务,云南省工程建设交易系统网站,证券公司网站建设方案在完成项目创建后#xff0c;uniapp为我们创建了一个全局的uni.scss文件#xff0c;里边定义了一些颜色#xff0c;字体大小的变量#xff0c;我们可以在项目中直接引用#xff1a;
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-…在完成项目创建后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 typecalendar size18 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() 是一个样式穿透选择器允许绕过样式隔离强制影响子组件内部的样式。
