@viewport, @media e LESS

Question

Ho recentemente convertito alcuni CSS in LESS per l'utilizzo con un'applicazione .NET (sto usando dotless per .NET, http://www.dotlesscss.org/ per compilare il LESS in fase di runtime).

Il compilatore è caduta su questi due blocchi di codice:

@viewport { 
    width: device-width; 
} 
/* Add a min-width for IE 8 and lower */ 
@media \0screen\,screen\9 { 
    body { 
     min-width: 960px; 
    } 
} 

Proprio per il vostro riferimento, la media query sopra è un modo hacky di colpire IE

Come posso "MENO-ify "questi blocchi di codice?

Answer 1

in meno> = 1.4.0 si può semplicemente definire una variabile e utilizzarlo nella media query:

@iehack: \0screen\,screen\9; 

@media @iehack { 
    body { 
     min-width: 960px; 
    } 
} 

Nelle versioni precedenti di MENO (< = 1.3.3) si potrebbe desiderare di utilizzare stringhe interpolazione delle stringhe nella variabile:

@iehack: ~'\0screen\,screen\9'; 

Questo dovrebbe fornire l'output desiderato.

Ma se si vuole andare un modo hacky in CSS si può anche andare un modo hacky in meno anche:

@themedia: ~"@media \0screen\,screen\9 {"; 
@aftermedia: ~"} after"; 
@{themedia} { 
    body { 
     min-width: 960px; 
    } 
} 
@{aftermedia}{/*just to add the closing bracket to media*/} 

in cui si inietta la query media di tutto un ruolo normale, questo genera un selettore in più alla fine del blocco multimediale, ma puoi usarlo anche per qualcosa di utile, questa tecnica potrebbe essere utilizzata in more exciting instances rispetto alle query multimediali ... ma volevo solo menzionarlo.

In questo caso l'uscita CSS sarà simile:

@media \0screen\,screen\9 { 
body { 
    min-width: 960px; 
} 
} 
after { 
    /*just to add the closing bracket to media*/ 
}