Sass custom function to sASS preprocessing
In DarkMode(2) : DarkMode Solution — CSS color variable implementation DarkMode and DarkMode(3) : DarkMode Solution — Color Inversion and Functions, if used
@mixin themeify { @each $theme-name, $theme-map in $themes { $theme-map: $theme-map ! global; body[data-theme=#{$theme-name}] & { @content; } } } @function themed($key) { @return map-get($theme-map, $key); }Copy the code
The style code written in this scheme, changed to normal mode, is very difficult to understand.
Instead, regular expressions are recommended
Is the first function, to replace the regular expression is as follows: \ @ include themeify \ {\ n ([\ s \ \ w: \ \ “\ \ (\); $\ \!] *) \}
const reg =/\@include themeify \{\n([\s\w\:\-\"\(\)\;\$\!] *)\}/ const reg = /@include themeify {\n([\s\w:\-"();$!] *)} /;Copy the code
I’ll just replace it with $1
Themed \([\w\-]*)\”\)\;
const reg = /themed\(\"([\w\-]*)\"\)\; /Copy the code
Replace with \ $$1
Switch the SASS variable topic output to the CSS variable topic output
If the sASS variable outputs two sets of themes, switch the theme style and refresh the page. If it is a CSS variable, there is no need to refresh the variable
The purpose is simply to output:
:root {
--primary-color: #{$primary-color};
}
Copy the code
If the previous direct statement, there is nothing to say
$accent-color: #fbbc04;
:root {
--accent-color-wrong: $accent-color;
--accent-color-right: #{$accent-color};
}
Copy the code
Instead of declaring a function:
$var-element:'--'; $colors: ( -black: #000, -blue: #088DC6 ); :root { @each $color in $color-variables { #{$var-element}#{nth($color, 1)}: #{nth($color, 2)}; }}Copy the code
How to read variable. SCSS variables and automatically process them into CSS variable files, this is being studied, wait for the empty point, then continue
This can be handled directly with the sass or less functions
If it is a map situation assignment, operate directly
Reprint the home station article “DarkMode (5) : dark mode switch different implementation scheme”, please indicate the source: www.zhoulujun.cn/html/webfro…