How do you search css in related less file in Magento 2?

Question

I want to change some css in header let says

media="screen and (min-width: 768px)"
@media (min-width: 768px), print
styles-l.css:1
.page-header {
 border: 0;
 margin-bottom: 0;
 background: #222;
}

i want to change the background #222 to #333, how can i search the related loaction in tones of less files? any ideas?

Answer 1

This property can be changed on this file below.

app/design/frontend/[Package]/[Theme]/Magento_Theme/web/css/source/_module.less

Remember to stay with the updated version, because old version have issue related to this.

But to discover easier you can set the developer mode and use this method on the DevDocs to debug LESS:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

You can check the Magento UI library here:

https://magebr.github.io/Magento-2-UI-library/index.html

Answer 2

This is something i have been trying to do and have just been using grep from ssh to search the theme folder however not always having luck. Overriding these rules instead of finding them has often been an easier quicker solution.