MENOS: usar menos en el navegador

Less se utiliza en el navegador cuando desea compilar el archivo Less de forma dinámica cuando sea necesario y no en el lado del servidor; esto se debe a que less es un archivo grande de JavaScript.

Para empezar, necesitamos agregar el script LESS para usar LESS en el navegador:

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

Para encontrar las etiquetas de estilo en la página, debemos agregar la siguiente línea en la página. También crea las etiquetas de estilo con el CSS compilado.

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

Opciones de configuración

Antes de la etiqueta de secuencia de comandos, las opciones se pueden establecer en el objeto menos mediante programación. Afectará todo el uso programático de less y las etiquetas de enlace iniciales.

Por ejemplo, podemos configurar la opción de la siguiente manera:

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

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

También podemos configurar la opción en otro formato en la etiqueta del script como se especifica a continuación:

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

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

También puede agregar estas opciones a las etiquetas de enlace.

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

Los puntos que deben tenerse en cuenta para las opciones de atributos son:

  • window.less <etiqueta de script <etiqueta de enlace son el nivel de importancia.

  • Los atributos de datos no se pueden escribir en caso de camello; la opción de etiqueta de enlace se representa como opciones de tiempo.

  • Los atributos de datos con valores que no sean cadenas deben ser válidos para JSON.

Modo reloj

El modo de vigilancia se puede habilitar configurando la opción env en desarrollo y llamando a less.watch () después de agregar el archivo less.js. Si desea que el modo de reloj se habilite temporalmente, agregue #! Watch a la URL.

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

Modificar variables

La modificación del tiempo de ejecución de la variable LESS está habilitada. El archivo LESS se vuelve a compilar cuando se llama a un nuevo valor. El siguiente código muestra el uso básico de modificar variables:

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

Depuración

Podemos agregar la opción ! DumpLineNumbers: mediaquery a la opción url o dumpLineNumbers como se mencionó anteriormente. La opción mediaquery se puede utilizar con FireLESS (muestra el nombre del archivo LESS original y el número de línea de los estilos CSS generados por LESS).

Opciones

Antes de cargar el archivo de script less.js, las opciones deben configurarse en un objeto menos global .

<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- Es de tipo booleano. Los archivos importados se solicitan ya sea con la opción async o no. Por defecto, es falso.

  • dumpLineNumbers- Es un tipo de cuerda. En el archivo css de salida, la información de la línea de origen se agrega cuando se establece dumpLineNumbers. Ayuda a depurar la regla particular de la que proviene.

  • env- Es un tipo de cuerda. El env puede ejecutarse en desarrollo o producción. El desarrollo se establece automáticamente cuando la URL del documento comienza confile:// o está presente en su máquina local.

  • errorReporting - Cuando falla la compilación, se puede configurar el método de notificación de errores.

  • fileAsync- Es de tipo booleano. Cuando una página está presente con un protocolo de archivo, puede solicitar si se debe importar de forma asincrónica o no.

  • functions - Es tipo de objeto.

  • logLevel- Es un tipo de número. Muestra el nivel de registro en la consola de JavaScript.

    • 2: Información y errores

    • 1: errores

    • 0: nada

  • poll- En el modo de reloj, el tiempo se muestra en milisegundos entre las encuestas. Es un tipo entero; de forma predeterminada, está establecido en 1000.

  • relativeUrls- Las URL se ajustan para ser relativas; de forma predeterminada, esta opción se establece como falsa. Esto significa que las URL ya son relativas al archivo sin entrada. Es un tipo booleano.

  • globalVars- Inserta la lista de variables globales en el código. La variable de tipo de cadena debe incluirse entre comillas

  • modifyVars- Es diferente a la opción de variable global. Mueve la declaración al final de su archivo less.

  • rootpath - Establece rutas al comienzo de cada recurso de URL.

  • useFileCache- Usos por caché de archivos de sesión. El caché en menos archivos se usa para llamar a las variantes de modificación, donde todos los archivos menos no se recuperarán nuevamente.