aboutsummaryrefslogtreecommitdiff
path: root/posts/css-variables.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
committerBradley Taunt <bt@btxx.org>2024-07-14 12:26:35 -0400
commite8876fb866c3d89c432dcd04634e9bd2ced18022 (patch)
tree2c9a51310bd9bd8041e5d7bbb85bbfd010e2b514 /posts/css-variables.md
parentc803e304d959f4926a55068d2b11f64bf4c95607 (diff)
Switch things back to smu instead of lowdown
Diffstat (limited to 'posts/css-variables.md')
-rw-r--r--posts/css-variables.md8
1 files changed, 4 insertions, 4 deletions
diff --git a/posts/css-variables.md b/posts/css-variables.md
index 17df49f..f0b389f 100644
--- a/posts/css-variables.md
+++ b/posts/css-variables.md
@@ -8,12 +8,12 @@ The CSS language is becoming even more awesome and powerful everyday. In this qu
Let's just jump right in - this is how you create variables in vanilla CSS:
-~~~css
+```css
:root {
--base-color: #e0e0e0;
--text-color: #111;
}
-~~~
+```
We are using the `:root` selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables.
@@ -21,7 +21,7 @@ As for the variables themselves, you declare that they are variables using the `
Now let's use those variables:
-~~~css
+```css
.header {
border: 1px solid var(--base-color);
}
@@ -30,7 +30,7 @@ Now let's use those variables:
background-color: var(--base-color);
color: var(--text-color);
}
-~~~
+```
That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway).