Javiermartin jc: Texto reemplazado: «
» por «»

2019-07-05T23:28:06Z

Texto reemplazado: «<div align="justify">» por «»

Yoels04024jc: Página creada con '{{Ficha Software |nombre= Less |familia= Lenguaje de programación interpretado |imagen= less_logo.jpg |tamaño= |descripción= Lenguaje de programación que permite a los ...'

2014-06-25T21:44:34Z

Página creada con '{{Ficha Software |nombre= Less |familia= Lenguaje de programación interpretado |imagen= less_logo.jpg |tamaño= |descripción= Lenguaje de programación que permite a los ...'

Página nueva

{{Ficha Software

|nombre= Less

|familia= Lenguaje de programación interpretado

|imagen= less_logo.jpg

|tamaño=

|descripción= Lenguaje de programación que permite a los desarrolladores crear hojas de estilos dinámicas para las páginas web

|imagen2=

|tamaño2=

|descripción2=

|creador= Alexis Sellier

|desarrollador=

|diseñador=

|modelo de desarrollo=

|lanzamiento inicial=

|versiones=

|última versión estable=1.7.0

|género=

|sistemas operativos= Multiplataforma

|idioma=

|licencia= Licencia Apache 2

|premios=

|web=http://lesscss.org/
}}
<div align="justify">
'''Less''' es un lenguaje de hojas de estilo dinámico. Less agrega a [[CSS]] comportamiento dinámico como variables, mixins, operaciones y funciones. LESS funciona tanto en el lado del cliente (Chrome, Safari, Firefox) y del lado del servidor, con Node.js y Rhino.

==Funcionamiento==
Para utilizar LESS no es necesario un plug-in ni nada especial. La idea detrás de la herramienta es que el navegador interpreta código CSS normal y corriente producido a través de un proceso de compilación de las plantillas escritas en LESS.
Lo único que cambia es la forma que se compila las plantillas LESS. Es posible utilizar un servidor Web basado en Node.js o bien servir las hojas de estilo CSS a través de un script en cualquier lenguaje como [[PHP]], [[Pitón]], [[Ruby]] o [[Perl]]. Para compilar las plantillas LESS en tiempo de ejecución del lado del servidor se utiliza Node.js, por citar un ejemplo.

==Cómo se usa==
Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del lado de servidor usando node.js, otra es utilizando [[Javascript]] del lado del cliente con less.js y por último usando una aplicación que compile los estilos .less a .css.

Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript del lado del cliente. Es un error porque esta versión se consideró para uso en ambientes de desarrollo —al ser más rápido de corregir en caso de error—, además es lenta y aumenta el riesgo de fallar al depender completamente de Javascript. Para hacer experimentos locales o iniciar está muy bien pero para producción no se recomienda.

==Variables==
Las variables le permiten especificar los valores utilizados en un solo lugar, y a continuación, volver a utilizarlos a lo largo de la hoja de estilos, por lo que puede hacer cambios globales tan fácil como cambiar una línea de código.
Ejemplo:

* ------ Código LESS ------*/
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

/* ------ salida CSS compilado ------ */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

==Mixins==
Los Mixins permiten introducir todas las propiedades de una clase a otra clase con sólo incluir el nombre de la clase como una de sus propiedades. Es igual que las variables, pero para clases enteras. Mixins también puede comportarse como funciones, y tomar argumentos, como se ve en el ejemplo de abajo.

/* ------ código LESS ------ */
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

/* ------ salida CSS compilado ------ */

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

==Reglas anidadas==
En lugar de construir largos nombres de selector para especificar la herencia, en LESS es posible anidar selectores simples dentro de otros selectores. Esto crea hojas de herencia claras y estilo más corto.

Ejemplo:
/* ------ código LESS ------ */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

/* ------ salida CSS compilado ------ */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

==Operaciones==
Las operaciones permiten sumar, restar, dividir y multiplicar valores de propiedad y colores, lo que permite crear complejas relaciones entre propiedades. Las operaciones no se deben efectuar dentro de paréntesis, a fin de garantizar la compatibilidad con CSS.

/* ------ código LESS ------ */
@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}

/* ------ salida CSS compilado ------ */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

==Uso del lado del Cliente==
Del lado del cliente es la forma más fácil y buena de empezar el desarrollo de código less. Para la producción y especialmente si es importante el rendimiento, se recomienda pre-compilar utilizando node o alguna de las muchas herramientas de terceros. Esto de logara enlazando las hojas de estilo LESS con el atributo rel ajustado a stylesheet/less.

Ejemplo:
<link rel="stylesheet/less" type="text/css" href="styles.less"/>

A continuación es necesario enlazar less.js en la cabecera de la página web.

Ejemplo:
<script src="less.js" type="text/javascript"></script>

==Uso Del lado del servidor==
La forma más fácil de instalar LESS en el servidor, es a través de la NGP, el gestor de paquetes de node, así:
$ npm install -g less
</div>
==Fuente==
*http://lesscss.org/
*http://impactar.co/less-css-en-espanol/
*http://www.liftingroup.com/less-el-lenguaje-dinamico-de-hojas-de-estilo/

[[Category:Software]]

@@ Línea 43: / Línea 43: @@
 |web=http://lesscss.org/
 }}
-<div align="justify">
 '''Less''' es un lenguaje de hojas de estilo dinámico. Less agrega a [[CSS]] comportamiento dinámico como variables, mixins, operaciones y funciones. LESS funciona tanto en el lado del cliente (Chrome, Safari, Firefox) y del lado del servidor, con Node.js y Rhino.

Less (lenguaje de hoja de estilo) - Historial de revisiones

Javiermartin jc: Texto reemplazado: «» por «»

Yoels04024jc: Página creada con '{{Ficha Software |nombre= Less |familia= Lenguaje de programación interpretado |imagen= less_logo.jpg |tamaño= |descripción= Lenguaje de programación que permite a los ...'

Javiermartin jc: Texto reemplazado: «
» por «»