{"id":181309,"date":"2014-09-01T06:42:22","date_gmt":"2014-09-01T13:42:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=181309"},"modified":"2014-09-01T06:42:22","modified_gmt":"2014-09-01T13:42:22","slug":"advantages-native-css-variables","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/advantages-native-css-variables\/","title":{"rendered":"Advantages to Native CSS Variables"},"content":{"rendered":"

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:<\/p>\n

    \n
  1. \n

    Daniel Imms:<\/a><\/p>\n

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.<\/p><\/blockquote>\n

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.<\/li>\n

  2. \n

    Peter Gasston:<\/a><\/p>\n

    you can set the value through the setProperty()<\/code> method on the style object<\/p><\/blockquote>\n

    Which makes #1 possible and opens up cool possibilities.\n<\/li>\n

  3. \n

    They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do: Daniel Imms: [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly. i.e. change the value of a variable on a live, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":336933,"url":"https:\/\/css-tricks.com\/want-to-write-a-hover-effect-with-inline-css-use-css-variables\/","url_meta":{"origin":181309,"position":0},"title":"Want to Write a Hover Effect With Inline CSS? Use CSS Variables.","date":"March 26, 2021","format":false,"excerpt":"The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they\u2019re writing the post. Just a super-light layer of art direction. To make that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/button-hover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372839,"url":"https:\/\/css-tricks.com\/interpolating-numeric-css-variables\/","url_meta":{"origin":181309,"position":1},"title":"Interpolating Numeric CSS Variables","date":"August 30, 2022","format":false,"excerpt":"We can make variables in CSS pretty easily: :root { --scale: 1; } And we can declare them on any element: .thing { transform: scale(var(--scale)); } Even better for an example like this is applying the variable on a user interaction, say :hover: :root { --scale: 1; } .thing {\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/scale-layers-scaled-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":246274,"url":"https:\/\/css-tricks.com\/difference-between-types-of-css-variables\/","url_meta":{"origin":181309,"position":2},"title":"What is the difference between CSS variables and preprocessor variables?","date":"October 25, 2016","format":false,"excerpt":"Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":344249,"url":"https:\/\/css-tricks.com\/build-complex-css-transitions-using-custom-properties-and-cubic-bezier\/","url_meta":{"origin":181309,"position":3},"title":"Build Complex CSS Transitions using Custom Properties and cubic-bezier()","date":"July 14, 2021","format":false,"excerpt":"I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/complex-transition.png?fit=1183%2C659&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":257627,"url":"https:\/\/css-tricks.com\/javascript-scope-closures\/","url_meta":{"origin":181309,"position":4},"title":"JavaScript Scope and Closures","date":"August 28, 2017","format":false,"excerpt":"Scopes and closures are important in JavaScript. But, they were confusing for me when I first started. Here's an explanation of scopes and closures to help you understand what they are. Let's start with scopes. Scope A scope in JavaScript defines what variables you have access to. There are two\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":268217,"url":"https:\/\/css-tricks.com\/theming-with-variables-globals-and-locals\/","url_meta":{"origin":181309,"position":5},"title":"Theming With Variables: Globals and Locals","date":"March 16, 2018","format":false,"excerpt":"Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity. Maybe we can fix both issues. I\u2019d like to try to boil design system variables down to two types: Global and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/css-varaibles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/181309"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=181309"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/181309\/revisions"}],"predecessor-version":[{"id":181311,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/181309\/revisions\/181311"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=181309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=181309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=181309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}