MENOS - Caso de uso clásico

Descripción

El caso de uso clásico se usa para evitar agregar la clase base en MENOS. Los valores escritos en la clase base se evitan cuando los mismos valores se anulan dentro de la otra clase.

Ejemplo

El siguiente ejemplo describe el uso del caso de uso clásico en el archivo LESS:

extend_syntax.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

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

estilo sin

.style {
   font-family: "Times New Roman";
   font-style:italic;
}

.cont {
   &:extend(.style);
   font-family: "Comic Sans MS";
}

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

.style,
.cont {
   font-family: "Times New Roman";
   font-style: italic;
}

.cont {
   font-family: "Comic Sans MS";
}

Salida

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

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

↰ Previous page