themeMixin.scss 615 B

12345678910111213141516171819202122232425262728
  1. @import './themeVariable.scss';
  2. $theme-map: null;
  3. @mixin themify($themes: $themes) {
  4. @each $theme-name, $map in $themes {
  5. // & 表示父级元素
  6. // !global 表示覆盖原来的
  7. .theme-#{$theme-name} & {
  8. $theme-map: () !global;
  9. // 循环合并键值对
  10. @each $key, $value in $map {
  11. $theme-map: map-merge(
  12. $theme-map,
  13. (
  14. $key: $value,
  15. )
  16. ) !global;
  17. }
  18. // 表示包含 下面函数 themed()
  19. @content;
  20. $theme-map: null !global;
  21. }
  22. }
  23. }
  24. @function themed($key) {
  25. @return map-get($theme-map, $key);
  26. }