javascript - lesscss print style - Stack Overflow

admin管理员组

文章数量:1336632

I want using lesscss for print, but it seems, the browser don't recongize the @media print,

since I don't want embbed

<link rel="stylesheet/css" type="text/css" href="themes/css/print.css" media="print">

into page.

can anyone help on this issue? lesscss sourse code address is here

thanks

I want using lesscss for print, but it seems, the browser don't recongize the @media print,

since I don't want embbed

<link rel="stylesheet/css" type="text/css" href="themes/css/print.css" media="print">

into page.

can anyone help on this issue? lesscss sourse code address is here

https://github.

thanks

• javascript
• css
• less

Share Improve this question Follow edited Dec 16, 2011 at 4:54 Philemon philip Kunjumon 1,42211 gold badge1515 silver badges3535 bronze badges asked Dec 16, 2011 at 2:15 mikemike 4311 silver badge55 bronze badges 5

• Your link should point to a .less file for it to work, not a .css file. – Leo Commented Dec 16, 2011 at 2:28
• no, I mean I don't want to using .css/.less file. My my less is working fine, but inside the style.less, the @media print not working – mike Commented Dec 16, 2011 at 3:01
• 1 Please share you code as well – Petah Commented Dec 16, 2011 at 3:29
• 1 my code is simple, you can just download h5bp template + lesscss, convert style.css to style.less, run on an Apache server or IIS(register .less for MINEYTPE)...and trying to put print style at @media print – mike Commented Dec 16, 2011 at 3:38
• 1 @mike - we don't want to have to go through that effort of downloading your less and running apache just to help you with your problem. Please provide your code right here, so we can see it easily and then we can help you. :) – Taryn East Commented Dec 21, 2011 at 19:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

<link rel="stylesheet/less" href="http://worldMaps/maps/styles/growth.less" media="all">

The important part is the media="all", otherwise it will not correctly parse your @media print {.no-print {display:none;}} inside your linked less file.

If your question is how to embed less-styles for media print: the media attribute within the link tag worked for me.

<link rel="stylesheet/less" type="text/css" href="print.less" media="print">

The media="print" is essential as less by default inserts piled styles as media="screen".

While I was using .less, the web developer tool option for displaying print styles wasn't rendering for me.

My solution, although may not render 100% correctly depending on the browser, is to switch the @media print and @media screen properties in the style sheet so that on page load, the print styles are rendered.

I don't suggest this solution if:

• You need to trace both screen and print styles
• You need precise measurements

I do suggest this solution if:

• You don't want to continually go back to print preview after every adjustment
• You are willing to sacrifice the above in order to test content arrangement and styling structure

If you are using lesscss, use @media property into "less" file.

Like this:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

And import file normaly:

<link rel="stylesheet/css" type="text/css" href="themes/css/print.less">

http://lesscss/#-pattern-matching-and-guard-expressions

本文标签： javascriptlesscss print styleStack Overflow