Add 3. Variables

3.-Variables.md

@@ -0,0 +1,43 @@
+Hylia introduces Variables, a core component in many code languages not present in HTML.
+To create a variable, we can use the `<var>` tag.
+A `<var>` tag is structured as follows:
+
+`<var name="CoolVariable">CoolValue</var>`
+
+Now how do we use these variables?
+
+We can use `{{VarName}}` to call them. That's the variable name wrapped in two curly brackets `{{ }}`
+
+Here is a basic Hylia file using them.
+
+```html
+<hylia>
+    <element name="head">
+        <title>Hello Hylia!</title>
+    </element>
+    <var name="testvar">Hi!</var>
+    <element name="body">
+            <h1>Hello Hylia!</h1>
+            <p>This is an example content.</p>
+            {{testvar}}
+    </element>
+</hylia>
+```
+When the file is compiled, It replaces `{{testvar}}` with the value of the `testvar` variable.
+Variables can contain tags, as long as they're oneliners:
+`<var name="testvar"><h1>Hello!</h1></var>`
+
+```
+<hylia>
+    <element name="head">
+        <title>Hello Hylia!</title>
+    </element>
+    <var name="testvar"><h1>Hello!</h1></var>
+    <element name="body">
+            <h1>Hello Hylia!</h1>
+            <p>This is an example content.</p>
+            {{testvar}}
+    </element>
+</hylia>
+```
+Compiling this file will replace `{{testvar}}` with `<h1>Hello!</h1>` in the output.