how to find and use defined variables of less in magento 2?
-
22-03-2021 - |
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.
Solution
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!