事半功倍之Ionic APP通过scss全局文件换皮肤，typescript中component.ts文件获取scss文件中定义的全局变量

最新推荐文章于 2024-02-18 09:50:21 发布

chelen_jak

最新推荐文章于 2024-02-18 09:50:21 发布

阅读量376

点赞数

分类专栏： Ionic3 实用赞文章标签： scss

原文链接：https://blog.csdn.net/u012381782/article/details/109715521

版权

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

205 篇文章 0 订阅

订阅专栏

Ionic3

175 篇文章 1 订阅

订阅专栏

原文出处： https://blog.csdn.net/u012381782/article/details/109715521 （建议阅读原文）
typescript中component.ts文件获取scss文件中定义的变量

第一步首先定义全局scss变量

// $appType:'PPW';
$appType:'LJ';
// 主色
$LJMainColor:#FFCA3A;
// 表单 label 、value颜色黑色
$LJLabelColor:#252629;
// PlaceHolde颜色
$LJPlaceHolderColor:#959BA6;
// 分割线颜色
$LJSepLineColor: #E8EAED;
// 表单末尾单位颜色
$LJEndTextColor:#959BA6;
// 灰色
$LJLabelGrayColor:#959BA6;
// 浅黑
$LJLabelLightBlackColor:#45474D;
// 常用字体颜色
$LJFontNormalColor:#27282e;
// Tab选项卡滑块样式
$LJTabBottomSliderColor:linear-gradient(90deg, #FFE14A 0%, #FFCA3A 100%);
$prefix: "--";
@function custom-property-name($name) {
@return $prefix + $name;
}
@mixin define-custom-property($name, $value) {
#{custom-property-name($name)}: $value;
}
body {
// Append SASS variables which are desired to be accesible:
@include define-custom-property('appTypeCustom', $appType);
}
2.第二步，因为 @include 是将变量引入到body,所以在需要获取变量的components文件中调用window.getComputedStyle(元素节点)来获取style的数组，这里面的元素节点就是document.body节点。

代码如下：

const bodyStyles = window.getComputedStyle(document.body);
this.appTypeCustom = bodyStyles.getPropertyValue('--appTypeCustom');
将变量配置在customGlobal.scss文件然后在ts文件访问的好处就是只需要改一个文件。方便维护。不用改了scss文件又改ts文件。
————————————————
版权声明：本文为CSDN博主「AndrewWen099」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012381782/article/details/109715521