MENO - Utilizzo di meno nel browser

Less viene utilizzato nel browser quando si desidera compilare il file Less in modo dinamico quando necessario e non sul lato server; questo perché less è un file javascript di grandi dimensioni.

Per cominciare, dobbiamo aggiungere lo script LESS per utilizzare LESS nel browser -

<script src = "less.js"></script>

Per trovare i tag di stile sulla pagina, dobbiamo aggiungere la seguente riga sulla pagina. Crea anche i tag di stile con il css compilato.

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

Opzioni di impostazione

Prima del tag script, le opzioni possono essere impostate sull'oggetto less a livello di codice. Influirà su tutto l'utilizzo programmatico di less e sui tag di collegamento iniziale.

Ad esempio, possiamo impostare l'opzione come segue:

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Possiamo anche impostare l'opzione in un altro formato sul tag script come specificato di seguito -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

È inoltre possibile aggiungere queste opzioni ai tag di collegamento.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

I punti che devono essere considerati per le opzioni degli attributi sono:

  • window.less <tag script <tag link sono il livello di importanza.

  • Gli attributi dei dati non possono essere scritti in caso di cammello; le opzioni del tag di collegamento sono rappresentate come opzioni temporali.

  • Gli attributi di dati con valori non di stringa devono essere validi in JSON.

Modalità orologio

La modalità watch può essere abilitata impostando l'opzione env su development e chiamando less.watch () dopo aver aggiunto il file less.js. Se desideri che la modalità watch venga attivata temporaneamente, aggiungi #! Watch all'URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modifica variabili

La modifica del tempo di esecuzione della variabile LESS è abilitata. Il file LESS viene ricompilato quando viene chiamato un nuovo valore. Il codice seguente mostra l'utilizzo di base delle variabili di modifica:

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Debug

Possiamo aggiungere l'opzione ! DumpLineNumbers: mediaquery all'opzione url o dumpLineNumbers come menzionato sopra. L' opzione mediaquery può essere utilizzata con FireLESS (mostra il nome del file LESS originale e il numero di riga degli stili CSS generati con LESS.)

Opzioni

Prima di caricare il file di script less.js, le opzioni devono essere impostate in un oggetto less globale .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

  • async- È un tipo booleano. I file importati vengono richiesti con l'opzione asincrona o meno. Per impostazione predefinita, è falso.

  • dumpLineNumbers- È un tipo di stringa. Nel file css di output, le informazioni sulla riga di origine vengono aggiunte quando viene impostato dumpLineNumbers. Aiuta nel debug della particolare regola da cui proviene.

  • env- È un tipo di stringa. L'env può essere eseguito in fase di sviluppo o produzione. Lo sviluppo viene impostato automaticamente quando l'URL del documento inizia confile:// oppure è presente nella macchina locale.

  • errorReporting - Quando la compilazione non riesce, è possibile impostare il metodo di segnalazione degli errori.

  • fileAsync- È un tipo booleano. Quando una pagina è presente con un protocollo file, può richiedere se importare in modo asincrono o meno.

  • functions - È il tipo di oggetto.

  • logLevel- È un tipo di numero. Visualizza il livello di registrazione nella console javascript.

    • 2: Informazioni ed errori

    • 1: errori

    • 0: niente

  • poll- Nella modalità orologio, l'ora viene visualizzata in millisecondi tra i sondaggi. È un tipo intero; per impostazione predefinita, è impostato su 1000.

  • relativeUrls- Gli URL si adattano per essere relativi; per impostazione predefinita, questa opzione è impostata come false. Ciò significa che gli URL sono già relativi al file entry less. È un tipo booleano.

  • globalVars- Inserisce l'elenco delle variabili globali nel codice. La variabile del tipo di stringa deve essere inclusa tra virgolette

  • modifyVars- È diverso dall'opzione della variabile globale. Sposta la dichiarazione alla fine del file less.

  • rootpath - Imposta i percorsi all'inizio di ogni risorsa URL.

  • useFileCache- Utilizza per cache di file di sessione. La cache in less files viene utilizzata per chiamare modifyVars dove tutti i file less non verranno più recuperati.