标签：scss web vars map color expose var 动态 萃取

动态调整web主题(2) 萃取篇

自从写完 动态调整web系统主题? 看这一篇就够了! 这篇文章之后，一直想把这篇文章中的思路提炼出来，发布成一个 npm 包。

这周正好有空编写了 tailwind-css-variables-theme-generator, 这个包就是之前思路的一个总结，里面有比较详细的使用文档。

针对之前思路的一些改进

原先在 之前那篇文章 里提到过 scss 与 js 通信的方法，主要依靠 webpack 的 :export 关键字，从而导出一个 js 对象。

现在有了更加高效的解决方案。

我们知道 sass 是支持 CustomFunction 的, 那么我们就可以声明一个 js Function 来提取出需要暴露的 sass 变量。

比如我们可以写这样一个方法:

// typescript
const exposeAarry: OrderedMap<SassString, SassColor>[] = []

'expose($map)': (args: Value[]) => {
  const value = args[0].assertMap('map')
  const map = value.contents as OrderedMap<SassString, SassColor>
  exposeAarry.push(map)
  return value
}

这样我们在 scss 里就可以这样写:

@use './constants.scss' as C;

$other-vars: (
  // same name : override ↑ constants map 
  --color-canvas-default-transparent: rgba(32, 54, 85, 0),
  --color-marketing-icon-primary: #053c74,
  --color-custom-text-color: #546821
);
// 使用 expose 导出 SassMap
$expose: expose(C.$root-vars);
$expose1: expose($other-vars);

从而将 SassMap 转化为 Js Map 进行处理。

这比使用 Webpack 的导出显然更加自由，且自定义程度高。

tailwind-css-variables-theme-generator 是什么？

这是一个文件生成器，它以一个 scss 文件作为入口，导出关联暴露的 scss 变量,并使用这些变量，通过模板渲染生成配置文件。

配置文件总共分为 3 类:

1. tailwindcss v3 扩展文件 extendColors.js
2. sass-loader 附加文件 variables.scss
3. 可选的工具文件 root.scss | export.scss | util.scss

其中这些文件的使用方式，在此不再叙述，Github文档上都有。

预设方案主题色切换示例:

:root {
  @each $var, $color in C.$root-vars {
    #{$var}: Util.getRgbString($color);
  }
}

[data-color-mode='light'] {
  @each $var, $color in Light.$light-vars {
    #{$var}: Util.getRgbString($color);
  }
}

[data-color-mode='dark'] {
  @each $var, $color in Dark.$dark-vars {
    #{$var}: Util.getRgbString($color);
  }
}

接下来，只要让 document.documentElement 的 data-color-mode 这个 Attribute 和代码中一个值双向绑定即可，非常简单。(vue 可使用 vue-meta 直接和某个值绑定)

后端控制动态切换

CSSStyleDeclaration.setProperty(property: string, value: string, priority?: string): void

可参考ThemeVariablesManager, 算是一点浅浅的封装。

Demo

Live Demo 右上角切换 Light / Dark 模式

Live Demo Source Code

标签：scss,web,vars,map,color,expose,var,动态,萃取
来源： https://blog.csdn.net/qq_33020601/article/details/122522185

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。