MENOS - Directivas de importación

Descripción

los @importLa directiva se usa para importar los archivos en el código. Difunde el código LESS en diferentes archivos y permite mantener la estructura del código fácilmente. Puede poner las declaraciones @import en cualquier lugar del código.

Por ejemplo, puede importar el archivo usando @importpalabra clave como @import "file_name.less" .

Extensiones de archivo

Puede usar las declaraciones @import dependiendo de las diferentes extensiones de archivo, como:

Si está utilizando la extensión .css , entonces se considerará como CSS y la declaración @import permanecerá como está.
Si contiene alguna otra extensión, se considerará MENOS y se importará.
Si no hay una extensión MENOS, se agregará e incluirá como archivo MENOS importado.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Ejemplo

El siguiente ejemplo demuestra el uso de la variable en el archivo SCSS:

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

Ahora, cree el archivo style.less .

estilo sin

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

El archivo import_dir.less se importará al archivo style.less desde la rutahttps://www.tutorialspoint.com/less/import_dir.less.

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

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Salida

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

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