How to add style rules to print.css

Question

In M2 they use custom .media-width mixin rules to add to styles-m.css or styles-l.css.

//
//  Common
//  _____________________________________________
& when (@media-common = true) {
   .catalog-product-view {

   }
}

//
//  Mobile
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

}

//
//  Desktop
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

}

Is there a similar method for adding style rules to print.css?

Answer 1

print.less file is used for print styles:

vendor/magento/theme-frontend-blank/web/css/print.less

So you should just need to extend/overwrite this file in your theme.

More info found on the dev docs here - http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html

Answer 2

If you use a custom theme you can go to the theme's path:

app/design/frontend/YourVendorName/YourThemeName/web/css and do a file called print.less.

Into that file copy and paste the content from this file: vendor/magento/theme-frontend-blank/web/css/print.less.

After that add the style changes that you want to do in app/design/frontend/YourVendorName/YourThemeName/web/css/print.less and then run this command:

php bin/magento setup:static-content:deploy

I hope this helps.