{"id":2726,"date":"2022-03-30T10:50:30","date_gmt":"2022-03-30T10:50:30","guid":{"rendered":"https:\/\/infyblog.zluck.in\/?p=2726"},"modified":"2024-08-17T08:50:42","modified_gmt":"2024-08-17T08:50:42","slug":"why-should-use-css-variables","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/","title":{"rendered":"Why Should Use CSS Variables?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2726\" class=\"elementor elementor-2726\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a52d836 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a52d836\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ac02ced\" data-id=\"ac02ced\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-0789f55 elementor-widget elementor-widget-text-editor\" data-id=\"0789f55\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>A variable gives us the ability to store a value inside it and then reuse it throughout the code.<strong> CSS variables make our work easier and more manageable.<\/strong><\/p><p>Imagine you have a large project and you have to make changes to the fonts and colors. Now, one common way to do that is by changing them all manually and individually. But this is a nightmare and there are chances that you might miss something.<\/p><p><strong>But with the use of CSS variables, you can do it with a few keystrokes.<\/strong> You just have to change the value of the variable where you have defined it and that&#8217;s it. So you see that this is where CSS variables come in handy. <strong>And CSS variables can be accessed and modified in JavaScript.<\/strong><\/p><h2>Syntax of CSS variables<\/h2>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d80eb3b elementor-widget elementor-widget-code-highlight\" data-id=\"d80eb3b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>.root { \r\n     --primary-color: #151515;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12b7c7c elementor-widget elementor-widget-text-editor\" data-id=\"12b7c7c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>A CSS variable is defined by adding double hyphens before your property name that follows the property name.<\/li><li><strong>The property name could be anything.<\/strong> You can name it whatever you want, but try giving them a reasonable name.<\/li><li>After that, you give value to that.<strong> CSS variables are case sensitive so be careful<\/strong> while declaring and using one.<\/li><\/ul><p>To use a CSS variable we use a function called <span style=\"color: #e83e8c;\">var().<\/span> This function recalls the value of the variable and returns it.<\/p><h2>Use of the variable:<\/h2>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01a92d8 elementor-widget elementor-widget-code-highlight\" data-id=\"01a92d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>.title {\r\n     color: var(--primary-color);\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8238b9 elementor-widget elementor-widget-text-editor\" data-id=\"e8238b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The above code will set the value of <span style=\"color: #e83e8c;\">.title<\/span> class selector&#8217;s color to <span style=\"color: #ed7851;\"><span style=\"color: #e83e8c;\">#151515<\/span><\/span>.<\/p><h2>Scopes of CSS variables :<\/h2><h4>CSS variables have two scopes<\/h4><ul><li>Global<\/li><li>Local<\/li><\/ul><h3>Global scope :<\/h3><p>A variable is said to be in global scope if it is defined in the highest level possible. For that, we use the <span style=\"color: #e83e8c;\">: root selector<\/span> for declaring the variables.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-694bede elementor-widget elementor-widget-code-highlight\" data-id=\"694bede\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>:root {\r\n    --text-font-family: sans-serif; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3880885 elementor-widget elementor-widget-text-editor\" data-id=\"3880885\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>A global scope variable can be accessed anywhere in the code.<\/strong> And you can also modify it.<\/p><h3>Local scope :<\/h3><p>We can restrict the use of CSS variables to a specific element <strong>by declaring in a low-level selector.<\/strong>For example, using it for a specific class.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f0161e elementor-widget elementor-widget-code-highlight\" data-id=\"1f0161e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>.container {\r\n     --main-color:#151515;\r\n} \r\n\r\n.container .heading { \r\n     color: var(--main-color);\r\n} <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91a9e4f elementor-widget elementor-widget-text-editor\" data-id=\"91a9e4f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now this variable can only be used by<span style=\"color: #ff8861;\"> .<\/span><span style=\"color: #e83e8c;\">container<\/span> selector or its child elements, And all the elements inside <span style=\"color: #e83e8c;\">.container<\/span> will initially inherit this property, but elements outside of<span style=\"color: #e83e8c;\"> .container<\/span> cannot use it.<\/p><h2>Overriding CSS variables :<\/h2><p><strong>CSS variables can be overridden.<\/strong> If in any part of your code you want to change the value of the variable you can do that.<\/p><p><strong>This is possible by accessing the variable in the local scope and giving it another value.<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b56b87 elementor-widget elementor-widget-code-highlight\" data-id=\"5b56b87\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>:root {\r\n     --text-color red; \r\n}\r\n\r\nheader {\r\n    --text-color: green; \r\n    color: var(--text-color); \/*color: green*\/\r\n}\r\n\r\nfooter {\r\n    --text-color: blue; \r\n    color: var(--text-color); \/*color: blue; *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-943d2ce elementor-widget elementor-widget-text-editor\" data-id=\"943d2ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>Now, overriding only works for the element that it is overridden in.<\/strong><\/p><p>And all the elements inside <span style=\"color: #e83e8c;\">header<\/span> and <span style=\"color: #e83e8c;\">footer<\/span> tags will get the new property value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>A variable gives us the ability to store a value inside it and then reuse it throughout the code. CSS variables make&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[73],"tags":[74,14],"class_list":["post-2726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why Should Use CSS Variables?<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Should Use CSS Variables?\" \/>\n<meta property=\"og:description\" content=\"A variable gives us the ability to store a value inside it and then reuse it throughout the code. CSS variables make...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-30T10:50:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-17T08:50:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"772\" \/>\n\t<meta property=\"og:image:height\" content=\"484\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"Why Should Use CSS Variables?\",\"datePublished\":\"2022-03-30T10:50:30+00:00\",\"dateModified\":\"2024-08-17T08:50:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\"},\"wordCount\":428,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png\",\"keywords\":[\"CSS\",\"Tips\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\",\"url\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\",\"name\":\"Why Should Use CSS Variables?\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png\",\"datePublished\":\"2022-03-30T10:50:30+00:00\",\"dateModified\":\"2024-08-17T08:50:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png\",\"width\":772,\"height\":484,\"caption\":\"Why Should Use CSS Variables?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Should Use CSS Variables?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why Should Use CSS Variables?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/","og_locale":"en_US","og_type":"article","og_title":"Why Should Use CSS Variables?","og_description":"A variable gives us the ability to store a value inside it and then reuse it throughout the code. CSS variables make...","og_url":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2022-03-30T10:50:30+00:00","article_modified_time":"2024-08-17T08:50:42+00:00","og_image":[{"width":772,"height":484,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"Why Should Use CSS Variables?","datePublished":"2022-03-30T10:50:30+00:00","dateModified":"2024-08-17T08:50:42+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/"},"wordCount":428,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"image":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png","keywords":["CSS","Tips"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/","url":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/","name":"Why Should Use CSS Variables?","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage"},"image":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png","datePublished":"2022-03-30T10:50:30+00:00","dateModified":"2024-08-17T08:50:42+00:00","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/why-should-use-css-variables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#primaryimage","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/why-should-use-css-variables-1-1-1.png","width":772,"height":484,"caption":"Why Should Use CSS Variables?"},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/why-should-use-css-variables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why Should Use CSS Variables?"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/2726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=2726"}],"version-history":[{"count":19,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/2726\/revisions"}],"predecessor-version":[{"id":6147,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/2726\/revisions\/6147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media\/2728"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=2726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=2726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=2726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}