From 2fa08b0642434d8d5bb2ea3b9375e110d6ca3417 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Thu, 14 Jun 2018 16:23:22 +1000
Subject: [PATCH] Add css variables

---
 categories/web.md | 43 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/categories/web.md b/categories/web.md
index 6b2a9d9..506d401 100644
--- a/categories/web.md
+++ b/categories/web.md
@@ -103,12 +103,14 @@ How browser render web page
 The flow diagram when you access a website
 
 ![Flow](https://raw.githubusercontent.com/wahyd4/knowledge-mind-mapping/master/assets/images/http-flow.jpg)
+
 # CSS
 
-- tips
+##  tips
 
-	- inline element can’t set width, modify the display to inline-block
-- inline element
+  * inline element can’t set width, modify the display to inline-block
+
+## inline element
 	* i
 	* span
 	* a
@@ -118,3 +120,38 @@ The flow diagram when you access a website
 	* button
 	* textarea
 	* br
+
+## CSS custom properties(variables)
+
+```css
+# global variable
+:root {
+  font-size: 16px;
+}
+element {
+  --main-bg-color: brown;
+}
+```
+Then you use it like:
+
+```css
+  element {
+    background-color: var(--main-bg-color);
+  }
+```
+
+Some advanced usage, you can have default value when variable is not set
+
+```css
+.two {
+  color: var(--my-var, red); /* Red if --my-var is not defined */
+}
+
+.three {
+  background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */
+}
+
+.three {
+  background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
+}
+```