Jump from a CSS variable usage to where it is defined

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Jump from a CSS variable usage to where it is defined

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like colors for example.

You can define and use a custom property as shown below:

rule-1 {
--my-main-color: blue;
}
rule-2 {
color: var(--my-main-color);
}

Sometimes, it can be hard in DevTools to see both the place where the variable is used and the place where it is defined. There may be a lot of rules and properties that apply to an element, requiring a lot of scrolling and searching.

In Edge and Chrome, you can simply click on a var(--foo) function to jump to where the --foo variable is defined!

Animation of clicking on a custom property link in the Styles panel in Edge.

See also