how to find and use defined variables of less in magento 2?

Question

basically i want to use the defined less variables in my custom theme.i have created a child theme of Luma .In child theme i have created a _theme.less file and by using the defined variables of less i changed the header panel background color by using

@header-panel__background-color: @color-black;

but i am confused where is the @header-panel__background-color is defined .i have searched also in lib folder but can't find any result.

Answer 1

You can check below file in vendor directory

vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less

Here in this file you can see this @header-panel__background-color.

Here in this less file Magento defines color for "@header-panel__background-color" so whenever we want to use this color code we will not add #4D926F there, we can use below line in our .less file to use same color.

#header {
  color: @header-panel__background-color;
}

So in Header I get this color "#4D926F".

You can check this for your reference link.

Hope this will help you!