--- type: slide --- # scss color模板 ###### tags: `HyUI4.0` --- HyUI 4.0增加了color的設定，使用scss的@each來快速產出同版型不同顏色的CSS 這種作法主要是更換class達到變換顏色功能 ```html= <body class="colorStyleA">藍色</body> <body class="colorStyleB">紅色</body> ``` --- # scss基本設定 --- 命名方式可以變更，使用時對應的到就好 之後只需要在此資料寫入第三筆第四比都會自動地跑出完整的css ```css= $colorStyleConfig: ( colorA: ( // 第一種顏色 color: blue, // 顏色色號 ... ), colorB: ( // 第二種顏色 color: red, // 顏色色號 ... ), ... ); ``` --- # 使用方式 有兩種使用方式一種純scss功能，另一種是搭配css新功能 --var --- 第一種純scss ```css= @each $item, $value in $colorStyleConfig { $color: map-get($value, color); .#{$item} { .txt { color: $color; } } } ``` $colorStyleConfig = 命名的變數名稱 $item = 該變數底下的 colorA / colorB $value = 該變數底下{}中的內容 colorA{} / colorB{} 利用 map-get() 把$value中的參數抓出來並賦予到另一個變數中 之後就可以利用該變數來產生css ```css= $size:16; font-size:$size; /* font-size:16 */ font-size:#{$size}px; /* font-size:16px */ ``` #{}是在當在使用變數時有其他的文字就需要增加 --- 以上語法編譯後會產生出css ```css= .colorA .txt { color: blue; } .colorB .txt { color: red; } ``` --- 第二種 利用css新功能--var加上scss處理 好處是可直接在瀏覽器的開發者工具變更root的顏色(變更:root資料)，也可以使用JS操作(:root) ```css= /* 指定對應顏色 */ :root { @each $item, $value in $colorStyleConfig { $color: map-get($value, color); --#{$item}: #{$color}; } } /* 迴圈跑出所有css */ @each $item, $value in $colorStyleConfig { .#{$item} { .txt { color: var(--#{$item}); } } } ``` --- 以上語法編譯後會產生出css ```css= :root { --colorA: blue; /* 顏色色號 */ --colorA: red; /* 顏色色號 */ --colorC: green; /* 顏色色號 */ } .colorA .txt { color: var(--colorA); /* color: blue; */ } .colorB .txt { color: var(--colorB); /* color: red; */ } ``` --- 以css --var 的方式可以在瀏覽器的開發人員工具css面板可以看到:root的區塊 ![](https://i.imgur.com/Y1k3iir.png) 若要使用JS修改可以利用以下語法 ```javascript= const root = document.documentElement; root.style.setProperty('--colorA', `#000`) ``` <style> .reveal h1{ font-size:2em; } .reveal h1,.reveal h2 { color:#c9f2ff; } </style>