aboutsummaryrefslogtreecommitdiff
path: root/posts/css-variables.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-20 12:13:49 -0400
committerBradley Taunt <bt@btxx.org>2024-07-20 12:13:49 -0400
commitb810d9a0b47dd49a90cc8ec7bf1b05f59ff945b3 (patch)
treed4e70797a7c1237a7e8a9be0d025e878d2601160 /posts/css-variables.md
parentf39a84524d77bcc2a83adfab01716c67cc7e983b (diff)
Crude testing with blogrb
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 f0b389f..17df49f 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).