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…