These are not intended to replace CSS preprocessors, the most popular being SASS<\/a>. Many builders specifically use SASS for larger projects, and along with CSS Variables as a core piece, it offers many advanced options. <\/p>\n\n\n\n If you\u2019ve worked with preprocessors before, however, you know that they need to be compiled to output the CSS. For that reason, this tutorial will focus on CSS Variables, and won\u2019t dive into details about preprocessors.<\/p>\n\n\n\n CSS Variables are a happy medium, and fortunately, there\u2019s strong browser support. Before committing to using CSS Variables in production, be sure to check Can I Use<\/a> to make sure they have the support you need. <\/p>\n\n\n\n CSS Variables are more efficient than working with plain CSS but don\u2019t require an advanced setup like SASS. The browser does the \u201ccompiling,\u201d and you\u2019re not dependent on setting up and environment that outputs the compiled CSS.<\/p>\n\n\n\n This approach is a good project fit for things like styling simple WordPress child themes. For projects like this, there tends to be a need to make styling updates to create a branded theme. CSS Variables can help, as they provide a manageable list of styling overrides and don’t require a special environment for compiling SASS to CSS.<\/p>\n\n\n\n WP Engine customers gain access to a suite of premium WordPress themes<\/a> that comes standard with every plan! You can get started building your next site for just $20\/month! Learn more here.<\/a><\/p>\n\n\n\n When using specific colors to stay on brand, one common requirement is having a brand color palette that can be used over and over again. It gets redundant to type the same color value each time. Plus, what if you want to make a change to one of the color values in the set? <\/p>\n\n\n\n For example, maybe a blue needs to be slightly darker. This happens all the time. Yes, of course, there\u2019s the trusty find and replace. Adjusting the value in one place, however, is more efficient when making this global change and as variables are reused.<\/p>\n\n\n\n Here\u2019s what a How are variables actually used? It\u2019s pretty simple. First, the variable is declared and then it\u2019s used in the needed CSS rule-set. <\/p>\n\n\n\n Scope is an important thing to be aware of. Variables need to be declared within a CSS selector that\u2019s within its intended scope. In many cases, you\u2019ll need variables to be available in the global scope, that way they\u2019re accessible to everything. You can use either the It\u2019s easy to spot variables; they have two dashes before them. The two dashes (–) need to be included.<\/p>\n\n\n\n The syntax of the Instead of adjusting the color in multiple places, the variable value is adjusted in once place.<\/p>\n\n\n\n The web inspector (Chrome in this case) allows you to inspect and see which variables are being used.<\/p>\n\n\n\n The following example first defines global custom properties named The examples above cover the basics of CSS Variables. These concepts can be applied to custom WordPress themes or any other custom CSS that you write. Variables have advantages over just plain CSS and will help you work more efficiently when making site-wide changes. They allow for better-organized stylesheets without the need for a preprocessor.<\/p>\n\n\n\n WP Engine\u00a0powers the freedom to create on WordPress. The company\u2019s products, the fastest among all WordPress providers, power 1.5 million digital experiences. More of the top 200,000 sites in the world use WP Engine to power their digital experiences than anyone else in WordPress. Find our more about our world-class WordPress hosting<\/a> or\u00a0speak to a representative today<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" CSS Variables, also referred to as CSS custom properties, allow for easy reuse in your CSS stylesheets. If you\u2019ve done work with WordPress child themes, you probably find yourself doing a lot of styling and overriding on things like color, padding, etc. If you\u2019re new to web design, it\u2019s worth mentioning that there\u2019s nothing wrong…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":140145,"template":"","resource-topic":[1396],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-29116","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n![\"css](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/desk-scene-662.png\")
Get Genesis Framework & StudioPress Themes for Free!<\/strong><\/h2>\n\n\n\n
![\"promotional](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2020\/02\/LinkedIn_1200x630@2x-3-784x412.jpg\")
<\/figure>\n\n\n\nHow to Use CSS Variables<\/h2>\n\n\n\n
CSS<\/code> Variable looks like:<\/p>\n\n\n\n[css]\n:root {\n--text-black: #232525;\n}\n\nheader {\ncolor: var(--text-black);\n}\n[\/css]<\/code><\/pre>\n\n\n\n
As I\u2019m streamlining the workflow for styling a WordPress child theme, I\u2019ve added the variables to my styles.css<\/code> file. This is just the \u201cshort list\u201d and as more are added, efficiently naming each variable becomes important.<\/p>\n\n\n\n[css]\n:root {\n--white: #ffffff;\n--black: #232525;\n--mid-gray: #eeeeee;\n--brand-red: #e50000;\n}\n[\/css]<\/code><\/pre>\n\n\n\n![\"css](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/side-desk-scene-662-1.png\")
<\/figure>\n\n\n\nThe var() Function<\/h3>\n\n\n\n
:root<\/code> or the body<\/code> selector for the global scope. There may be instances where you need to limit the scope, however, and want to work with a locally-scoped variable.<\/p>\n\n\n\nvar()<\/code> is pretty straightforward:<\/p>\n\n\n\nvar(variable-name, value)<\/code>\n[css]\n:root {\n--light-gray: #eeeeee\n--text-black: #434344\n}\n\n.sidebar {\n--background-color: var(--light-gray);\n--color: var(--text-black);\n}\n[\/css]<\/code><\/pre>\n<\/div>\n\n\n\n![\"css](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/image3-copy.png\")
<\/figure>\n\n\n\n--light-gray<\/code> and --text-black<\/code>. The var()<\/code> function is called, which inserts the value of the custom properties later in the stylesheet:<\/p>\n\n\n\n[css]\n:root {\n--light-gray: #eeeeee;\n--text-black: #434344;\n}\n\n.sidebar {\nbackground-color: var(--light-gray);\ncolor: var(--text-black);\n}\n[\/css]<\/code><\/pre>\n\n\n\n
It\u2019s worth mentioning that variables can be very useful when working with CSS breakpoints. By using globally scoped variables in different breakpoints, things like padding and other useful styling can be customized for various sizes.<\/p>\n\n\n\n[css]\n:root {\n--gutter: 5px;\n}\n\nsection {\npadding: var(--gutter);\n}\n\n@media (min-width: 600px) {\n:root {\n--gutter: 15px;\n}\n}\n[\/css]<\/code><\/pre>\n\n\n\n
Here\u2019s an example of variables that can be found in the local scope. We\u2019ve only touched on the global scope so far, so you\u2019ll notice that things are not in the root. These are styles for a warning message. There\u2019s a warning text color declared here that is only useful for this class. Also, it\u2019s worth noting that calc<\/code> can be utilized also.<\/p>\n\n\n\n[css]\n.warning {\n--warning-text: #ff0000;\n--gap: 20;\ncolor: var(--warning-text);\nmargin-top: calc(var(--gap) * 1px);\n}\n[\/css]<\/code><\/pre>\n\n\n\n![\"css](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/09\/image2-copy.png\")
<\/figure>\n\n\n\n
\n\n\n\nFuel the Freedom to Create With WP Engine<\/strong><\/h2>\n\n\n\n