diff --git a/src/code/colorful.js b/src/code/colorful.js
index 29de7ff..91d2468 100644
--- a/src/code/colorful.js
+++ b/src/code/colorful.js
@@ -195,15 +195,19 @@ export function colorHtml(code) {
 export function colorCss(code) {
   code = code
     .replace(STR, '<cc class="t-str">$1$2$1</cc>')
-    .replace(/(\$[a-zA-Z\d_]+)/g, '<c class="t-var">$1</c>')
+    .replace(/(\$[a-zA-Z\d_\-]+)/g, '<c class="t-var">$1</c>')
     .replace(/(\-\-[a-z\d]+\-[a-z\d]+)/g, '<c class="t-const">$1</c>')
     .replace(
       /:(hover|after|active|last\-child|first\-child|nth\-child)/g,
       '<c class="t-buildin">:$1</c>'
     )
     .replace(
-      /(?=\s)?([ ][\.#])([\w\-]+)/g,
-      '<c class="t-comment">$1</c><c class="t-buildin">$2</c>'
+      /^((?:[ ])*)([\.#])([\w\-]+)/gm,
+      '$1<c class="t-comment">$2</c><c class="t-keyword">$3</c>'
+    )
+    .replace(
+      /:(root|host)/g,
+      '<c class="t-comment">:</c><c class="t-keyword">$1</c>'
     )
     .replace(/([a-zA-Z\-]+):(\s?[^\n]+)/g, (m, k, v) => {
       if (v.trim() !== '(' && !v.endsWith('</cc>;')) {