supporto @media e @ font-face in LessCSS

Question

Ciao Qualcuno sa come fare una media query con LessCSS?

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

mi dà il seguente errore:

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

Allo stesso modo, @ font-face e qualsiasi richiesta CSS3 con una @ conflitto con il compilatore di LessCSS.

Grazie!

Answer 1

Per quanto ho capito, LessCSS non supporta @media, si possono trovare biglietti aperti per che sulla loro home page github.

L'unico modo che vedo per questo al lavoro nel tuo caso è questo:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

---

lo fa apparire come il problema è stato risolto nelle versioni LessCSS in quanto la risposta accettata.

Answer 2

Tutte le risposte di cui sopra non sono aggiornati.

Sia less.js e lessCss / errati privi di punti di supporto @ media e @ font-face.

Inoltre supportano ora @media con regole annidate, per es.

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

diventa

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

Si prega di fare riferimento alla documentazione less.js e documentazione errati privi di punti per ulteriori informazioni.

Answer 3

Se è possibile utilizzare less.js , funziona a destra, fuori dalla scatola. Ho provato lo stesso esempio:

@media screen and (max-width: 600px) {
    #container{
        width: 480px;
    }
}

ed è riprodotto esattamente lo stesso nel file css. C'è anche una funzionalità di fuga in less.js, ma sembra solo a lavorare sui valori, quindi non credo che si potrebbe utilizzare per questo.

body {
    color: e('red');
}

Sto indovinando che si sta utilizzando l'originale Rubino LessCSS però? Se non è possibile passare a quello nuovo, l'unica altra cosa che posso pensare utilizza un @include. Questo potrebbe essere un po 'meglio di un altro link tag nel codice HTML, e se si comprime tutti i file CSS, si potrebbe essere in grado di evitare la richiesta HTTP in più.

Answer 4

MENO attualmente non fornisce alcun supporto speciale per le media query. Ciò significa che è impossibile incorporare le media query all'interno di regole annidate meno, costringendo gli sviluppatori a silo loro stili sensibili in una sezione separata del documento MENO, piuttosto che nel tenerli in contesto. Lasciate che vi faccia un esempio di come potrebbe funzionare:

Un invito ad abbracciare MENO responsive design

Quindi sì, è possibile utilizzare le media query in questo momento, ma non è possibile scrivere nella sintassi nidificato.

Scopri i commenti su questo post del blog per alcune soluzioni proposte che sembrano essi saranno rotolato in less.js prima che poi.

Answer 5

L'usiamo sul nostro progetto e mai trovato al lavoro.

creare un file CSS esterno di cui non è gestito da meno. Il file css meno sarà in grado di accedere al font-face.

Answer 6

Così ho aggiunto una semplice stampa @media {.no-print {display: none;}} nel seguente file .less riferimento:

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

e sarebbe non funziona. Tuttavia, il nostro guru css ha sottolineato che .lesses default è di tipo uso dei media di schermo, quindi se si cambia il riferimento meno link per

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

Poi, all'improvviso, la stampa @media nel file meno otterrà raccolto e iniziare a lavorare al solito.

Speriamo che questo aiuta qualcun altro confuso quanto lo ero io.