MENOS - Importando

Descripción

Se utiliza para importar el contenido de los archivos LESS o CSS.

Ejemplo

El siguiente ejemplo demuestra el uso de la importación en el archivo LESS:

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Ahora cree el archivo myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Ahora cree el archivo style.less .

estilo sin

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

El archivo myfile.less que se importará a style.less desde la ruta

Puede compilar el archivo 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

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Salida

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

  • Guarde el código html anterior en el importing.html archivo.

  • Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.