上文《DarkMode(2)：深色模式解決方案——css顏色變量實(shí)現(xiàn)Dark Mode》，完全基于樣色抽離變量，然后使用預(yù)處理其，生成兩套樣式。切換樣式文件。
sass自定義函數(shù)與mixin指令實(shí)現(xiàn)暗黑模式
其實(shí)還是變量抽離，只是不是兩個(gè)variable 變量文件，而是一個(gè)map文件。
首先聲明函數(shù)
@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);
}
樣式代碼
button?{
?@mixin?background($color)?{
??@include?themeify?{
????background:?themed($color)
??}
?}
??color:?themify(accent-200);
??&:hover?{
????background-color:?themify(primary-100,?0.5);
??}
}
js切換樣式
document.body.dataset.theme?=?newValue;
當(dāng)然，給body添加樣式類也是可以的。其實(shí)這種方案，還是 css 選擇器去 隔離各個(gè)主體模塊
更新詳細(xì)，推薦閱讀：《Introducing Themify: CSS Themes Made Easy?》、《How to Create a Dark Mode in Sass》
sass顏色函數(shù)實(shí)現(xiàn)深色模式
在定義sass變量時(shí)，我們會(huì)有基準(zhǔn)尺寸，如：
$h1-font-size:????????????????$font-size-base?*?2.5?!default;
$h2-font-size:????????????????$font-size-base?*?2?!default;
$h3-font-size:????????????????$font-size-base?*?1.75?!default;
$h4-font-size:????????????????$font-size-base?*?1.5?!default;
$h5-font-size:????????????????$font-size-base?*?1.25?!default;
$h6-font-size:????????????????$font-size-base?!default;
顏色，我們也可以定義基準(zhǔn)顏色，主題色系，通過sass顏色函數(shù)，生成整個(gè)主題。
然后對(duì)基準(zhǔn)顏色，進(jìn)行處理，就生成另外一套主題
sass提供蠻多的顏色函數(shù)：
https://sass-lang.com/documentation/modules/color
從大的方面主要分為RGB、HSL和Opacity三大類函數(shù)，當(dāng)然其還包括一些其他顏色函數(shù)，比如說adjust-color、change-color等等。
這里大致地介紹一下
HSL顏色函數(shù)
“HSL”所表示的是“H:色相”，“S：飽和度”，“L：亮度”。色相是在色盤上的顏色（見下圖），顏色的選擇是使用飽和度：“0度是紅色”，“120度為綠色”和“240度為藍(lán)色”。
HSL給我們帶來了一個(gè)更直觀的顏色控制，我們時(shí)常需要讓一個(gè)顏色比另一個(gè)顏色更暗一點(diǎn)或者說更亮一點(diǎn)。比如說“a:hover”狀態(tài)下我們需要把一個(gè)顏色變暗一點(diǎn)，那么使用“HSL”是非常方便的。
這方面的理論知識(shí)，安利下：《色彩空間RGB/CMYK/HSL/HSB/HSV/Lab/YUV基礎(chǔ)理論及轉(zhuǎn)換方法:RGB與YUV》
其中我們最常用的有：lighten、darken、saturation、lightness、adjust-hue
lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個(gè)新的顏色；
darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個(gè)新的顏色；
invert($color)：反回一個(gè)反相色，紅、綠、藍(lán)色值倒過來，而透明度不變。
saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個(gè)新的顏色
desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個(gè)新的顏色；
saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值；
lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值；
grayscale($color)：將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);
complement($color)：返回一個(gè)補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg);
hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色；
hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色；
hue($color)：從一個(gè)顏色中獲取色相（hue）值；
adjust-hue($color,$degrees)：通過改變一個(gè)顏色的色相值，創(chuàng)建一個(gè)新的顏色；
其中，我們通過 invert、lighten、darken 相關(guān)，就可以生成我們暗黑模式。
RGB顏色函數(shù)
rgb顏色只是顏色中的一種表達(dá)方式，其中R是“red"表示紅色，而G是“green”綠色，B是“blue”藍(lán)色。在Sass中為RGB顏色提供六種函數(shù)：
rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；
rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；
red($color)：從一個(gè)顏色中獲取其中紅色值；
green($color)：從一個(gè)顏色中獲取其中綠色值；
blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。
RGBA()函數(shù)
rgba()函數(shù)主要用來將一個(gè)顏色根據(jù)透明度轉(zhuǎn)換成rgba顏色。其語法有兩種格式：
rgba($red,$green,$blue,$alpha)：將一個(gè)rgba顏色轉(zhuǎn)譯出來，和未轉(zhuǎn)譯的值一樣
rgba($color,$alpha)?：將一個(gè)Hex顏色轉(zhuǎn)換成rgba顏色
Mix()函數(shù)
Mix函數(shù)是將兩種顏色根據(jù)一定的比例混合在一起，生成另一種顏色。具體地說，選擇權(quán)重是每個(gè)RGB的百分比來衡量，當(dāng)然透明度也會(huì)有一定的權(quán)重。其中指定的比例會(huì)包括在返回的顏色中。默認(rèn)的的比例是50%,這意味著兩個(gè)顏色各占一半，如果指定的比例是25%,這意味著第一個(gè)顏色所占比例為25%，第二個(gè)顏色所占比例為75%。其使用語法如下：
mix($color-1,$color-2,$weight):$color-1和$color-2指的是你需要合并的顏色，顏色可以是任何表達(dá)式，也可以是顏色變量。$weight合并的比例，默認(rèn)值為50%，其取值范圍是0~1之間。
這一部分的實(shí)現(xiàn)，需要和設(shè)計(jì)師緊密地配合。所以，對(duì)于目前前端所處的環(huán)境，其實(shí)也沒有啥好講的
先回去睡覺，明天再講
轉(zhuǎn)載本站文章《DarkMode(3)：sass函數(shù)實(shí)實(shí)現(xiàn)深色模式操作》,
請(qǐng)注明出處：https://www.zhoulujun.cn/html/webfront/style/darkMode/8584.html
