{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/give-your-css-superpowers-with-css-variables/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"3db16256-6938-56b2-8c59-ffb85dfc8ba9","timeToRead":2,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Give Your CSS Superpowers with CSS Variables\",\n  \"date\": \"2020-05-22T13:41:29.058Z\",\n  \"template\": \"post\",\n  \"draft\": true,\n  \"slug\": \"give-your-css-superpowers-with-css-variables\",\n  \"category\": [\"tutorial\"],\n  \"tags\": [\"CSS\", \"Codepen\", \"Tutorial\", \"Web Development\"],\n  \"description\": \"This post will introduce what CSS variables are, how to use them and why to consider using them.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Callout = makeShortcode(\"Callout\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"what-are-css-variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#what-are-css-variables\",\n    \"aria-label\": \"what are css variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"What are CSS variables?\"), mdx(\"p\", null, \"CSS variables or CSS custom properties are a way to declare reusable values within a CSS project. CSS variables can greatly reduce the repetition of code and allow us to reference more semantically meaningful names throughout our stylesheets like \\\"--accent-color\\\" versus the actual value they represent \\\"#b5838d\\\".\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, \"Most modern browsers support CSS variables. If you need to know whether or not CSS variables are supported in a particular browser without a polyfill it's a best-practice to reference browser-compatibility specifications on sites like \", mdx(\"a\", {\n    href: \"https://caniuse.com/#feat=css-variables\"\n  }, \"Can I use?\"), \" or \", mdx(\"a\", {\n    href: \"https://developer.mozilla.org/en-US/docs/Web\"\n  }, \"MDN web docs\"), \".\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/css-variable-browser-support.png#center\",\n    \"alt\": \"screenshot of CSS variable compatibility\"\n  }), \"\\nCurrent CSS Variables Browser Support (Source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\"\n  }, \"MDN Web Docs\"), \")\"), mdx(\"h2\", {\n    \"id\": \"how-to-declare-css-variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#how-to-declare-css-variables\",\n    \"aria-label\": \"how to declare css variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"How to declare CSS variables\"), mdx(\"p\", null, \"In order to use CSS variables you should create a CSS custom property, which is a string prepended with a double hyphen \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--\"), \". These properties are scoped and available based on their selector. Generally, it is recommended to make the selector the pseudoselector \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \":root\"), \" so that it will apply throughout an entire site. If you select a more specific selector then the scope of where you can access the value of the variable changes accordingly.\"), mdx(\"p\", null, \"Below is an example showing 5 different CSS variables being declared to represent different colors within a stylesheet.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \":root {\\n  --white: #fff;\\n  --accent-color: #b5838d;\\n  --dark-accent-color: #a6757f;\\n  --main-color: #6d6875;\\n  --dark-main-color: #56505f;\\n}\\n\")), mdx(\"p\", null, \"In order to access the these CSS values throughout our CSS we can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var()\"), \" method like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var(--accent-color)\"), \". The following example selects the element with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"signup\"), \" class and changes its background-color to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#b5838d\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".signup {\\n  background-color: var(--accent-color);\\n}\\n\")), mdx(\"p\", null, \"Since the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--accent-color\"), \" is being set with a CSS variable if we later decide to change the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var(--accent-color)\"), \" we only have to change it in one place, where the variables value is declared. Once the value of the variable is updated its new value will automatically be reflected everywhere \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var(--accent-color)\"), \" is referenced. Being able to change the color in one place for a multitude of unrelated elements that are only coupled by color is powerful.\"), mdx(\"h2\", {\n    \"id\": \"the-power-of-css-variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#the-power-of-css-variables\",\n    \"aria-label\": \"the power of css variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"The Power of CSS Variables\"), mdx(\"p\", null, \"CSS variables allow you to quickly play around with a color scheme and tweak the same color everywhere it is referenced without having to do a find and replace. Additionally, setting up CSS variables can improve the developer experience when creating color schemes, as you can switch the variable declaration values between themes without having to explicitly change the values within the rest of the stylesheet.\"), mdx(\"p\", null, \"The two screenshots below show the difference in appearance when one line in the CSS file is changed from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--accent-color: orange;\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--accent-color: #b5838d;\"), \" which is used in two completely separate places -- on the card's border-top property and the background color for the signup button. This can be very useful as stylesheets grow and values are re-used throughout.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": \"center\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"th\"\n  }, \"--accent-color: orange;\")), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": \"center\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"th\"\n  }, \"--accent-color: #b5838d;\")))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": \"center\"\n  }, mdx(\"img\", {\n    parentName: \"td\",\n    \"src\": \"/media/orange-css-var-example.png#center\",\n    \"alt\": null\n  })), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": \"center\"\n  }, mdx(\"img\", {\n    parentName: \"td\",\n    \"src\": \"/media/pink-css-var-example.png#center\",\n    \"alt\": null\n  }))))), mdx(\"h2\", {\n    \"id\": \"explore-css-variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#explore-css-variables\",\n    \"aria-label\": \"explore css variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Explore CSS variables!\"), mdx(\"p\", null, \"Play around with the CSS variable values by \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codepen.io/M0nica/pen/jObpJma\"\n  }, \"editing the below Codepen\"), \" to see CSS variables in action!\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codepen.io/M0nica/pen/jObpJma\"\n  }, \"https://codepen.io/M0nica/pen/jObpJma\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#what-are-css-variables","title":"What are CSS variables?"},{"url":"#how-to-declare-css-variables","title":"How to declare CSS variables"},{"url":"#the-power-of-css-variables","title":"The Power of CSS Variables"},{"url":"#explore-css-variables","title":"Explore CSS variables!"}]},"frontmatter":{"title":"Give Your CSS Superpowers with CSS Variables","date":"May 22, 2020","description":"This post will introduce what CSS variables are, how to use them and why to consider using them.","tags":["CSS","Codepen","Tutorial","Web Development"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1323921965850206209","wmProperty":"mention-of","wmId":898634,"type":"entry","url":"https://twitter.com/kaziplus_/status/1323921965850206209","likeOf":null,"author":{"url":"https://twitter.com/kaziplus_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1b1cf2d7b8b8caf8a1f48d111bf328ce8c48e81fb8b02bb3039e915f1a89e8f3.jpg","name":"Kazi+"},"published":"November 04, 2020","content":{"text":"CSS variables can greatly reduce the repetition of code.\n#programmer #javascript  #programming #network #FrontEnd   #coding #android #developer #development #css #uiux #websites\naboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/570754198","wmProperty":"like-of","wmId":858993,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-570754198","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/paulwvnjohi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0075a656c371aba020aee369f319667e68967a84a2c5a8864cf498858b8cf0f6.jpg","name":"🛸"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/817035068531216384","wmProperty":"like-of","wmId":857164,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-817035068531216384","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/vrhiphop","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9125274900f2c0019324064a71e660ed8ad5c808a1e293a88cbf05647fc68b14.jpg","name":"VRHipHop"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1007102566625210368","wmProperty":"like-of","wmId":857105,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1007102566625210368","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/CalvinKabanda","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/efd621ba22f66854df8380b612c364e1a75e89d4705ca4ba321256c07cd87905.jpg","name":"calvin kabanda"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1018730588117688321","wmProperty":"like-of","wmId":856454,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1018730588117688321","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/BryanMatthews23","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8ef4c56c5a2c7097a16a07b53708de40efff80779685ad948abd3147c0349aeb.jpg","name":"Bryan Matthews"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1308863574165647360","wmProperty":"mention-of","wmId":855177,"type":"entry","url":"https://twitter.com/okereke__/status/1308863574165647360","likeOf":null,"author":{"url":"https://twitter.com/okereke__","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/05615f1a595bb359d57bade232a1f081fed0278da0d1d9de8d2a5240306b8dce.jpg","name":"Okereke"},"published":"September 23, 2020","content":{"text":"This is marvelous! \nremember to take time out and go through her other articles; concise and straight to the point :  ) \n#100DaysOfCode #CSS"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/902094769064697856","wmProperty":"like-of","wmId":855176,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-902094769064697856","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/okereke__","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/05615f1a595bb359d57bade232a1f081fed0278da0d1d9de8d2a5240306b8dce.jpg","name":"Okereke"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/372321316","wmProperty":"like-of","wmId":855170,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-372321316","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/adriathomas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ad47cfd74254903a24b6823f52aa22a16b59e317668441d88450692f79d619ca.jpg","name":"Adrian Thomas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/2492795644","wmProperty":"like-of","wmId":855162,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-2492795644","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/zratatata","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/465f83b2b3ddd72be480f239f53686a069f873dea38ab7c734d87f38ad461388.jpg","name":"zainab 🎨"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/526608725","wmProperty":"like-of","wmId":855159,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-526608725","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/MontalvoCC","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5c8ec4ee6f4cb97406ef1fa0ff243f41ed31838adbeea12b397721e068eb798d.jpg","name":"Connie Montalvo"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308795962895339528","wmProperty":"repost-of","wmId":855060,"type":"entry","url":"https://twitter.com/abiolaEsther_/status/1308795962895339528","likeOf":null,"author":{"url":"https://twitter.com/abiolaEsther_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4caeecf170a364ebb7d38aa2b03a11e02ae713809ea63c34d58114b9a1d13b7d.jpg","name":"€sther🌹"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1013332342843367424","wmProperty":"like-of","wmId":855015,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1013332342843367424","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/amjohnphilip","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5caa7dadff10769f98e06e24a40cbc7784c4e6d53287530df78efdfa005aa4d7.jpg","name":"John Philip 🐛"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1263938560094322689","wmProperty":"like-of","wmId":855011,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1263938560094322689","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/Shameka_Online","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d707c69c1b22b28904c734e9d4729605612be921583c74fc6e769753f60232c1.jpg","name":"Shameka"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/403819794","wmProperty":"like-of","wmId":855002,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-403819794","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/_rtmonteiro","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ecb73818129b44448ba575dd0976151aa894c8f0bd12b1bbff76e9e9855676b6.jpg","name":"rincon paciência"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/351262288","wmProperty":"like-of","wmId":855003,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-351262288","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/fabianbrash","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ce0e92ea236b019dd044f723456d7e6ac3d10cf2fc202fc350082fce049c974.jpg","name":"Fabian Brash"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1145441861521281024","wmProperty":"like-of","wmId":854991,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1145441861521281024","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/aleja_ferre","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a14888ea921ff93ae09a237a1b90c2e783a65824361881a8050d7373dacbee54.jpg","name":"Maria Alejandra Ferreira torres"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308702461457293312","wmProperty":"repost-of","wmId":854983,"type":"entry","url":"https://twitter.com/SawdaSays/status/1308702461457293312","likeOf":null,"author":{"url":"https://twitter.com/SawdaSays","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9f67bbe4a66f5a6335d2064fd08a396e84f5d5efa66c15e7e8b52d935e2ed9f7.jpg","name":"S."},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1044888772784123904","wmProperty":"like-of","wmId":854975,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1044888772784123904","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/TheRealDine","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1d88d140413f90f7532b822b3c9a73f86bf44dcc2db7c455159a5c2f6709c261.jpg","name":"TheRealDine"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308662379601891330","wmProperty":"repost-of","wmId":854948,"type":"entry","url":"https://twitter.com/Sk1_ll3/status/1308662379601891330","likeOf":null,"author":{"url":"https://twitter.com/Sk1_ll3","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0f153c5636929a462eebf7a3319190465b332f0bf8e6672ddf2468d598c4abd2.jpg","name":"Skillz"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308662548187709440","wmProperty":"repost-of","wmId":854947,"type":"entry","url":"https://twitter.com/UKBlackTech/status/1308662548187709440","likeOf":null,"author":{"url":"https://twitter.com/UKBlackTech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/52226b2ebfdec938ea031beea2d165707a9214109ddc0994471be778ef03d8ab.jpg","name":"UKBlackTech"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1214943582521643008","wmProperty":"like-of","wmId":854945,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1214943582521643008","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/TechBadGuyy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/317d906a8fd1c88bf5a98439b00f6fb5813d62d53d17cfa6996e9f7e468087b5.jpg","name":"TechBadGuy"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/165198512","wmProperty":"like-of","wmId":854946,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-165198512","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/jovmassimiliano","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/548de218b411453abcf25c8db8feaf7a505fa49409de2ec593fc722f8332c82d.jpg","name":"Giovanni Massimiliano"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/165401136","wmProperty":"like-of","wmId":854933,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-165401136","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/gilbertsosi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/71f1069dbe6588e5f0496689cfdcaf59cab809712a369a99481455b0fc7003ac.jpg","name":"C://gilbertsosi/v3.0"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1242869738365169665","wmProperty":"like-of","wmId":854928,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1242869738365169665","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/Ahuoyiza_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5d8b3bfc307e0ea9cd4df1f3f88014903725b1001d476e8114ad100136005e2c.jpg","name":"Sophia Abubakar"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/730063","wmProperty":"like-of","wmId":854920,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-730063","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/coleturner","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/34bfc56f37d76bf8b6c2cf2f4c82a54a5a716cdf5f57d93c59962c36782ea659.jpg","name":"Cole Turner"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/32330308","wmProperty":"like-of","wmId":854915,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-32330308","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/coderinheels","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9ed63e1c387c1ccf5978c07ad1744f77a9c195a4006b40ba7c41409feaa7cd66.jpg","name":"Gen Ashley"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/924301654303891456","wmProperty":"like-of","wmId":854913,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-924301654303891456","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/MaheshtheDev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/41fba37b2ea0392144708960a2921ff4fa56017a163277b5e6ee89a335e1b91a.jpg","name":"Mahesh Sv👨‍💻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/602939163","wmProperty":"like-of","wmId":854897,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-602939163","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/charliee_chap","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6e5281678c02b504effdcd35b2ee3bcebcaf4644fdf67b78f008ddd346fee398.jpg","name":"Kangie 🦘"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/889625519314128896","wmProperty":"like-of","wmId":854896,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-889625519314128896","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/NachoDev3","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/61f76f497ba5a770d55a7979be5b38c9cc92a955181cbb3c4d8d03da588102e9.jpg","name":"NachoDev"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308595226215239680","wmProperty":"repost-of","wmId":854895,"type":"entry","url":"https://twitter.com/ryansotoo/status/1308595226215239680","likeOf":null,"author":{"url":"https://twitter.com/ryansotoo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6764cc073134fa6d7095d83e0105318f3cc46893afad4b583104049496d5c786.jpg","name":"ryan"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/2867707908","wmProperty":"like-of","wmId":854894,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-2867707908","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/ryansotoo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6764cc073134fa6d7095d83e0105318f3cc46893afad4b583104049496d5c786.jpg","name":"ryan"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1265870449076047880","wmProperty":"like-of","wmId":854886,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1265870449076047880","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/oksanadev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7050fa66c6ea92e8fd79ab5c36223a0ff15b83bf08272b9034ec49f9790bf154.jpg","name":"oksanadev"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308573541336408065","wmProperty":"repost-of","wmId":854881,"type":"entry","url":"https://twitter.com/cliftonC76/status/1308573541336408065","likeOf":null,"author":{"url":"https://twitter.com/cliftonC76","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a06310f32781ad4aa54a41019d92b58ee4980dd25d86a334dbe87c4fe6106ee1.jpg","name":"Call me Cliff"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/166554503","wmProperty":"like-of","wmId":854880,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-166554503","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/cliftonC76","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a06310f32781ad4aa54a41019d92b58ee4980dd25d86a334dbe87c4fe6106ee1.jpg","name":"Call me Cliff"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1249810769463533568","wmProperty":"like-of","wmId":854879,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1249810769463533568","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/KriszPap","type":"card","photo":"https://webmention.io/avatar/abs.twimg.com/0e6b2cd70aa5b35dec24ca4e1e63f8963f0118736d9ec3bba77e3a8c99a27bc2.png","name":"KriszPap"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/16562139","wmProperty":"like-of","wmId":854877,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-16562139","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/JavaFXpert","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8b95d8807e331b5fbf84d361a20b3e12b10869740b75e31478e8b62bb25be270.jpg","name":"JavaFXpert"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/48182269","wmProperty":"like-of","wmId":854878,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-48182269","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/shannon_crabill","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9fcdedd58c12234646f620daefb5bac0dec5a6a6e97262f753f51bce4ddcabf0.jpg","name":"Shannon \"certified young person\" Crabill"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/726236142","wmProperty":"like-of","wmId":854875,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-726236142","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/wisco_cmo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1cc4e22de765d23612b8b25b2842b64b127b266580b853544f34ba06817c9fc5.jpg","name":"Chris Otto"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/120354228","wmProperty":"like-of","wmId":854876,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-120354228","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/antoniohilario","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ea8036454be75b7cbc47d24aea1e288315e3c455da995ed7c69b1b6f13bc6c35.jpg","name":"Jose Hilario"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/36206557","wmProperty":"like-of","wmId":854869,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-36206557","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/RococoCode","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2c224c8ed102d0ff04b3208d1e354e2ad73c59a071d609a1c9c461343beb5028.jpg","name":"Alice Chang"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308563049549357058","wmProperty":"repost-of","wmId":854862,"type":"entry","url":"https://twitter.com/MedSadali/status/1308563049549357058","likeOf":null,"author":{"url":"https://twitter.com/MedSadali","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0b4a885b5dd67926e2e8b5c2e1c7346a7496bd2236cb2b6e1a660b4ad5b44b6c.jpg","name":"Mohand 💻"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308562931966189568","wmProperty":"repost-of","wmId":854863,"type":"entry","url":"https://twitter.com/parsingpeppers/status/1308562931966189568","likeOf":null,"author":{"url":"https://twitter.com/parsingpeppers","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/efb1d12fb88dfc2b4503dd49d66cfba6efe0771df4a0081547197afe281b30c2.jpg","name":"Percocet Peppers"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/978817857009090560","wmProperty":"like-of","wmId":854861,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-978817857009090560","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/parsingpeppers","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/efb1d12fb88dfc2b4503dd49d66cfba6efe0771df4a0081547197afe281b30c2.jpg","name":"Percocet Peppers"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/32190243","wmProperty":"like-of","wmId":854859,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-32190243","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/resource11","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/17efd969828de1c2a7a88c92ee820ba2867711a45d729f729bc16c62f470f8d5.jpg","name":"Kathleen McMahon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/954071071640178688","wmProperty":"like-of","wmId":854860,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-954071071640178688","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/EmmanuelBammy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ec5e89075109ca1e5f4398304ed3bfc763b07e35b7e1aeae6516878b2dcd42d3.jpg","name":"DevBammy"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308556842344251393","wmProperty":"repost-of","wmId":854853,"type":"entry","url":"https://twitter.com/codeFreedomRitr/status/1308556842344251393","likeOf":null,"author":{"url":"https://twitter.com/codeFreedomRitr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cc2882316258239dc657217df41481583e5704cf5dc5b426dec370ebca33051f.jpg","name":"Natalie Davis"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308557258880512000","wmProperty":"repost-of","wmId":854852,"type":"entry","url":"https://twitter.com/techgirl1908/status/1308557258880512000","likeOf":null,"author":{"url":"https://twitter.com/techgirl1908","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/030e12121e47ef027a6255a9b520b1cce14e5b1de39fa6c1882f6a328ca71f44.jpg","name":"Angie Jones"},"published":"September 23, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1150161888459800577","wmProperty":"like-of","wmId":854851,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1150161888459800577","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/codeFreedomRitr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cc2882316258239dc657217df41481583e5704cf5dc5b426dec370ebca33051f.jpg","name":"Natalie Davis"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/127561254","wmProperty":"like-of","wmId":854850,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-127561254","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/jesus_macedo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bb4a280f92fc5fd41cf68126c2aaabc93e9c50e7b94a212fbf83cdeb9472e648.jpg","name":"Jesús Macedo 🤘🏻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/2932738834","wmProperty":"like-of","wmId":854849,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-2932738834","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/techgirl1908","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/030e12121e47ef027a6255a9b520b1cce14e5b1de39fa6c1882f6a328ca71f44.jpg","name":"Angie Jones"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308527245661790213","wmProperty":"repost-of","wmId":854837,"type":"entry","url":"https://twitter.com/Prototypr/status/1308527245661790213","likeOf":null,"author":{"url":"https://twitter.com/Prototypr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d76394ff03919ec80fd4791b097824813bee43bed2e56279e100dee10de9a901.jpg","name":"Prototypr.IO"},"published":"September 22, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308532066431176704","wmProperty":"repost-of","wmId":854836,"type":"entry","url":"https://twitter.com/abiolaEsther_/status/1308532066431176704","likeOf":null,"author":{"url":"https://twitter.com/abiolaEsther_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4caeecf170a364ebb7d38aa2b03a11e02ae713809ea63c34d58114b9a1d13b7d.jpg","name":"€sther🌹"},"published":"September 22, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/24612854","wmProperty":"like-of","wmId":854835,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-24612854","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/jaishirelle","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4bff6e2fd0dd32b6a515780a3cd63ec4d3829c6f60ce0f2c6428864601a0698e.jpg","name":"The Fat and Skinny on Fashion"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1049455480941289473","wmProperty":"like-of","wmId":854834,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1049455480941289473","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/abiolaEsther_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4caeecf170a364ebb7d38aa2b03a11e02ae713809ea63c34d58114b9a1d13b7d.jpg","name":"€sther🌹"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/375761450","wmProperty":"like-of","wmId":854832,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-375761450","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/tatusaucedo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8a2462593d82d18eef0ffae8eba93ee33d37815ef356de61874a29e19833daff.jpg","name":"Tati"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/2234623872","wmProperty":"like-of","wmId":854833,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-2234623872","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/bossnayamoss","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2185a7c31ccdedd2098ab139603ea4bc7bf86cef599f4a4a3ad9c79fcf29c755.jpg","name":"Naya Moss is working on #frauvishackathon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308518471140093953","wmProperty":"repost-of","wmId":854815,"type":"entry","url":"https://twitter.com/gvwilson/status/1308518471140093953","likeOf":null,"author":{"url":"https://twitter.com/gvwilson","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2b95c966730142d714fe103fe464f723cb878b019b13413396a9d7a34d85d598.jpg","name":"Greg Wilson"},"published":"September 22, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1308514910083538944/1308515690073042944","wmProperty":"repost-of","wmId":854816,"type":"entry","url":"https://twitter.com/chrisbiscardi/status/1308515690073042944","likeOf":null,"author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":"September 22, 2020","content":{"text":"CSS variables are a fun way to give regular CSS superpowers and help make implementing theming much easier. aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1009594769817796608","wmProperty":"like-of","wmId":854813,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1009594769817796608","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/kefimochi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d86fc2503ef6f00ed67c0f821d2e8f90685a6a1bba594e3e324336770e8b903e.jpg","name":"Cake is Kate. Always has been. 💫"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/360128398","wmProperty":"like-of","wmId":854814,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-360128398","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/Nasmayor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a1e1e253dc6d56526354f15ab90689070f253ada7d31e2dc0c491596ee24967c.jpg","name":"Capt Nas."},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/3115345708","wmProperty":"like-of","wmId":854812,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-3115345708","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/maxcell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a883720df399748ec3c5e79fdb00e3bcfa1aed681d0b2db5977e20976816186d.jpg","name":"Prince Wilson"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/3275142558","wmProperty":"like-of","wmId":854810,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-3275142558","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/amberlyckline","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b693f66668028e917be0848e26e3cb426683cb1211c90d0b68f03627add76bc7.jpg","name":"Amberly Kline"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/37289216","wmProperty":"like-of","wmId":854811,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-37289216","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/amber1ey","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/546722d310e3067bbd9393841318ed5ed624771314e4979856feb1e4405ce31f.jpg","name":"amberley"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/699981330654871552","wmProperty":"like-of","wmId":854809,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-699981330654871552","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/Prototypr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d76394ff03919ec80fd4791b097824813bee43bed2e56279e100dee10de9a901.jpg","name":"Prototypr.IO"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/240315182","wmProperty":"like-of","wmId":854807,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-240315182","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/58988018","wmProperty":"like-of","wmId":854808,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-58988018","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/ThatsRadCullen","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/24b5dd608a3c0ca4946cb4757659e46d3afad7007a4c045d6752b8eb0b925d29.jpg","name":"Cullen Kirkpatrick🤙👨🏻‍💻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/23742780","wmProperty":"like-of","wmId":854806,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-23742780","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/mge_de","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9de7ce35efc145a14199d759ca59e2d8c77f3494093109c174f6d5152a6e989b.jpg","name":"Michael Gehrmann"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/71344126","wmProperty":"like-of","wmId":854805,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-71344126","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/LittleKope","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/22ac76d6f0e898374cf4f90d18d39ffb6b6c7685306d36380e5f90cedafaa2c1.jpg","name":"Lindsey (she/her) #BlackLivesMatter"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/333691402","wmProperty":"like-of","wmId":854803,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-333691402","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/limonlu_chay","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/372cb32e5c113561f220b50666f674fc98d5fb05a4fd063b4d87367668a66f9e.jpg","name":"Limonlu çay"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1112680506947223552","wmProperty":"like-of","wmId":854804,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1112680506947223552","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/gerig_thamara","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/884d6cc4d4472ca1b4edcd33ef09a19aa96d70a7f7e21e478b58b78ae3ad02b2.png","name":"Thamara Gerig"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/1259622945955016705","wmProperty":"like-of","wmId":854802,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-1259622945955016705","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/tannerdolby","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0b9b6080c2486ab209b39facadec189a081288baa997cdb77bda07ddd9dafa21.jpg","name":"Tanner Dolby"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1308514910083538944/887600911270412288","wmProperty":"like-of","wmId":854801,"type":"entry","url":"https://twitter.com/waterproofheart/status/1308514910083538944#favorited-by-887600911270412288","likeOf":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","author":{"url":"https://twitter.com/Didicodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6430302697288b668df5e1955c77f0b73732b4c8704f5cfe0cd0852c82662536.jpg","name":"Edidiong Asikpo"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1284261660824408065","wmProperty":"mention-of","wmId":828422,"type":"entry","url":"https://twitter.com/cssbasics/status/1284261660824408065","likeOf":null,"author":{"url":"https://twitter.com/cssbasics","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0c5f19dd703bb322c09db2c66a4b0da4b2e725549cf044856b41c1800a24d919.jpg","name":"CSS Basics"},"published":"July 17, 2020","content":{"text":"Give Your CSS Superpowers with CSS Variables, by @waterproofheart aboutmonica.com/blog/give-your…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1265281534925234176","wmProperty":"mention-of","wmId":802016,"type":"entry","url":"https://twitter.com/ArtTechChat/status/1265281534925234176","likeOf":null,"author":{"url":"https://twitter.com/ArtTechChat","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f3bc0d4a814cf61d26a8b998932dc4442b1de7068aced122ceb91def8e52b04e.jpg","name":"ArtTechChat"},"published":"May 26, 2020","content":{"text":"If you want to supercharge your CSS skills with CSS variables, check out this tutorial and demo from @waterproofheart \n\naboutmonica.com/blog/give-your…\n\n#ArtTechChat\n#ArtTechChatDaily"}}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/give-your-css-superpowers-with-css-variables/","slug":"/blog/give-your-css-superpowers-with-css-variables/","prev":{"id":"93a3f234-f419-54a8-be65-462f3a8bc02f","frontmatter":{"title":"Initial Thoughts On Migrating from gatsby-transformer-remark to gatsby-plugin-mdx","category":["reflection"],"date":"2020-05-26T11:28:31.895Z","slug":"thoughts-on-migrating-from-markdown-to-mdx","tags":["Gatsby","MDX"],"redirects":null},"fields":{"slug":"/blog/thoughts-on-migrating-from-markdown-to-mdx/"}},"next":{"id":"3649910c-3092-5bce-a063-ef20dd7d32ae","frontmatter":{"title":"Top Gatsby Plugins For Developer Blogs","category":["opinion"],"date":"2020-04-19T17:44:36.261Z","slug":"2020-04-19-essential-gatsby-plugins-for-blogs","tags":["Gatsby","Blogging"],"redirects":null},"fields":{"slug":"/blog/2020-04-19-essential-gatsby-plugins-for-blogs/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}