MENOS - Opciones de importación en línea de palabras clave

Descripción

los @import (inline)declaración copiará su CSS en el archivo CSS de salida sin procesarlo. Esto es útil cuando el archivo CSS no es MENOS compatible. Aunque LESS admite la mayoría de los estándares CSS, los comentarios no son compatibles en algunos lugares y sin modificar el CSS, no admitirá todos los hacks de CSS conocidos. Aunque@import (inline)no procesará el CSS, se asegurará de que todo su CSS esté en un archivo. Esto fue lanzado en la versión 1.5.0.

Ejemplo

El siguiente ejemplo demuestra el uso de la palabra clave de referencia en el archivo LESS:

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Import Option Inline</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p>LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

A continuación, cree el archivo style.less .

estilo sin

@import (inline) "http://www.tutorialspoint.com/less/import_inline.css";
p {
   color:red;
}

El siguiente código importar el import_inline.css archivo en style.less del camino con el siguiente código -

import_inline.css

.style {
   font-family: "Comic Sans MS";
   font-size: 20px;
}

Puede compilar style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

.style {
   font-family: "Comic Sans MS";
   font-size: 20px;
}

p {
   color: red;
}

Salida

Siga estos pasos para ver cómo funciona el código anterior:

Guarde el código html anterior en el import_options_inline.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

Si intenta utilizar el .style clase dentro del p etiqueta en style.less, arrojará un error indefinido .

↰ Previous page