MENOS - Mix

Descripción

Se utiliza para mezclar los dos colores junto con la opacidad. Tiene los siguientes parámetros:

color1 - Representa un objeto de color.
color2 - Representa un objeto de color.
weight - Es un parámetro opcional que especifica el peso del elemento proporcionando un punto de equilibrio porcentual entre los dos colores.

Ejemplo

El siguiente ejemplo demuestra el uso de la operación de mezcla de colores en el archivo LESS:

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

   <body>
      <h2>Example of Mix Color Operation</h2>
      <div class = "myclass">
         <p>Mixed color :<br>#b0897d</p>
      </div>
   </body>
</html>

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

estilo sin

.myclass{
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: mix(#b361b1, #acb148, 50%);
   color:white;
}

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

.myclass {
   height: 100px;
   width: 100px;
   padding: 30px 0px 0px 25px;
   background-color: #b0897d;
   color: white;
}

Salida

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

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

↰ Previous page