MENOS - Palabra clave de referencia de opciones de importación

Descripción

los @import (reference)se utiliza para importar archivos externos pero no agregará estilos importados al archivo CSS compilado. 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 Options Reference</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 (reference) "http://www.tutorialspoint.com/less/import_reference.less";
p {
   .style1;
}

El siguiente código importar el import_reference.less archivo en style.less de la camino -

import_reference.less

.style1 {
   color: #A0A0A0;
   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

p {
   color: #A0A0A0;
   font-family: "Comic Sans MS";
   font-size: 20px;
}

Salida

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

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

los reference tiene el extend método que tira de un nuevo selector en el lugar donde se refiere el @import declaración y la marca como not referenced. Para obtener más información, haga clic aquí .

↰ Previous page