Alguien trabajando con LESS?

cvander · #1 (**permalink**) 26/08/2011, 10:17

Ayer descubrí LESS como parte del Bootstrap de Twitter. Me ha encantado bastante por el uso de variables y operaciones en CSS.

http://lesscss.org/#-client-side-usage

¿Alguien lo ha usado?

Este código en LESS:

Código CSS:

Ver original// 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%);
}

Se transformaría en esto en CSS:

Código CSS:

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

Para proyectos muy grandes me parece buenísima idea para escalarlos y declarar variables al inicio.

Es necesario compilarlo ya sea via node.js o en el mismo navegador.

alexk · #2 (**permalink**) 26/08/2011, 11:33

no es muy nuevo... en su tiempo me encanto la idea... solo que me parecio complejo aplicarlo en ese entonces... ahora acostumbro algo similar pero con mas codigo claro... un dia libre intentare aplicarlo... no solo para sitios grandes creo que aplica para todo... almenos para ahorrar tiempo... muy interesante

Tedel · #3 (**permalink**) 26/08/2011, 13:26

Prefiero el CSS 3 en realidad, pero si Less evoluciona, podría considerarlo.

alexk · #4 (**permalink**) 26/08/2011, 18:02

Tedel podrias mostrarme un ejemplo con CSS3?...

hombrelectrico · #5 (**permalink**) 26/08/2011, 21:32

Me encanta LESS, me parece la herramienta del futuro para escribir codigo css...

La version de LESS que presenta el framework de twitter es en javascript. Yo en su momento realize varias pruebas con una version escrita en php (http://leafo.net/lessphp/).

El unico problema con el que me tope fue que no podia debugear con firebug el codigo procesado por less, pues las lineas del archivo fuente y el archivo procesado no coinciden.

Saludos

PD.: soy nuevo, hay forma de quitar la publicidad del header?

uokesita · #6 (**permalink**) 27/08/2011, 01:26

Me gusta mas sass especialmente la version vieja q no lleva {

doylelives · #7 (**permalink**) 28/08/2011, 13:28

No sabia de su existencia, buena sugerencia.

cristian_cena · #8 (**permalink**) 28/08/2011, 17:40

Bueno, decir que quede sumamente extasiado cuando vi este topic. Nunca había usado less, en cambio había hecho algunas pruebas con cssCacher y siguiendo este tutorial de nettuts.

Busqué el bootstrap de twitter que mencionó cvander y aunque no he hecho practicas con el aún es bueno saber que se basa en less. Con este contexto no pude sino bajar less y poner manos a la obra para ver que sale.

index.html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="less/dist/less-1.1.4.min.js" type="text/javascript"></script>
 
</head>
<body>
    <a href="#">test enlace</a>
    <h2>test h2</h2>
    <div>
        <p>Hola <span>mundo</span></p>
    </div>
</body>
</html>

styles.less

Código CSS:

Ver original// vars 
@color: #a8b317;
@colorSecundary:red;
@font:Arial;
@fontSecundary:Georgia;
 
//code 
body{font-size: 16px;}
 
a, h2 {
    font-family: @font;
    color: @color;
}
 
div {
    color: @colorSecundary;
    p {
        font-family: @fontSecundary;
        span{
            font-weight:bold;
        }
    }
}

Esto así como está funciona perfecto en mi servidor local bajo windows.

Lo que no me quedó claro, ojalá alguien pueda aclararmeló, es el tema de la compilación. Por ejemplo en este sitio veo que ofrecen un codigo para compilar con python, y en este el compilador para php (es el que usaría yo)
Pero sin embargo funciona igual sin incluir ningún compilador.
¿acaso es para que funcione aún con js desactivado? supongo.
¿Alguien tendría la amabilidad de armar un pequeño ejemplo para php XD?

Por lo demás su simple sintaxis y potencia me dan muchas ganas de usarlo. Acabo de encontrar este video-tutorial al respecto para quien le sirva y de paso pueda ampliar este tema.

Nos seguimos leyendo, saludos.

PD: alexk, sabes que se valora tu aporte, quedo atento para cuando hagas tiempo de compartirlo.

alexk · #9 (**permalink**) 02/09/2011, 19:31

mmmm ahora que me di mi tiempo e investigo mas el tema las variables, ver ejemplo y el modo de uso...
este recurso no creo poder explotarlo... al menos en mi estilo de trabajo... es decir... yo trabajo mas con clasess en mi html con propiedades y valores "genericos" y en mi CSS solo propiedades y valores explicitos... por ejemplo

Código HTML:

Ver original<div class="divespecial_1 bold white float_left width300px textcen">texto en negritas, en color blanco, flotado a la izquierda, con 300px de ancho, y texto alineado al centro</div>

una especie de "framework" donde "divespecial_X" o una ID me ayuda a distinguir un elemento de otro... y es algo que vengo usando desde mis inicios y cada vez va cambiando como sienta yo que me va a ser mas productivo...

Me vendria genial el "less css" si pudiera manejarlo en mis clases es decir...

Código HTML:

Ver original<div class="divespecial_2 w300px(*2)">div con 600px de ancho</div>

si entendi bien... aun que no se, si sera posible... almenos en mi manera muy personal de trabajar no me agiliza en nada...

PD: cristian_cena si haz tenido tiempo para mirar mas afondo el tema... comenta que tal... ya que personalmente no me ayudo en nada... una pena

cristian_cena · #10 (**permalink**) 02/09/2011, 20:01

Hola alex, la verdad estoy con muy poco tiempo, pero en tanto me haga un espacio publico mi entorno de trabajo y dios quiera ya integrando less, si es que logro compilarlo con php.
Personalmente creo que aportaría mucho integrar less, porque si bien mantenes separadas tus clases, todo lo que sea "no abstraible" lo trabajas con más orden y menos código. Además de que lo abstraible se beneficiaría de las variables.

Nos leemos, saludos.

cvander · #11 (**permalink**) 03/09/2011, 00:34

Cristian y Alex, pendiente de sus aportes.

Cristian, nota que vos estás usando el compilador en javascript me parece, razón de que no necesites nada más. Tu CSS lleva código y variables pero se procesa con el .js respectivo.

Alexk, la lógica que pone LESS te propondía hacer un poco diferentes las cosas porque vos estarías mezclando la compilación dentro del HTML. Sin embargo creo que basándote en el concepto de lo que logran podría modificarse el compilador en PHP que tienen por ejemplo y que use tu sistema. Aunque ojo, estarias inventando otra cosa más ;)

alexk · #12 (**permalink**) 03/09/2011, 07:04

Cita:

Iniciado por cvander

Alexk, la lógica que pone LESS te propondía hacer un poco diferentes las cosas porque vos estarías mezclando la compilación dentro del HTML. Sin embargo creo que basándote en el concepto de lo que logran podría modificarse el compilador en PHP que tienen por ejemplo y que use tu sistema. Aunque ojo, estarias inventando otra cosa más ;)

Si pense en ello pero lastima que PHP no controlo

aun asi vale la pena probar aver que pasa... muy interesante ojala pueda explotarlo como se debe...

cristian_cena · #13 (**permalink**) 03/09/2011, 09:13

Cita:

Iniciado por cvander

Cristian, nota que vos estás usando el compilador en javascript me parece, razón de que no necesites nada más. Tu CSS lleva código y variables pero se procesa con el .js respectivo.

Es cierto, aunque tal vez sería bueno pasarle la responsabilidad al servidor para entornos no-javascript. Me gustaría saber sus opiniones al respecto.

En caso de que sea mejor hacerlo con php:

Supongamos que tenemos esta estructura de directorios

Descargar lessphp

Creamos un archivo .less con los estilos.
less_con_PHP/css/less/estilos.less

Código CSS:

Ver original// vars 
@color: #a8b317;
@colorSecundary:red;
@font:"courier new";
@fontSecundary:Georgia;
 
//code 
body{font-size: 16px;}
 
a, h2 {
    font-family: @font;
    color: @color;
}
 
div {
    color: @colorSecundary;
    p {
        font-family: @fontSecundary;
        span{
            font-weight:bold;
        }
    }
}

Notar ahora como lessc::ccompile('css/less/estilos.less', 'css/estilos.css'); lo que hace es leer en "css/less/estilos.less" y crear (si no existe, sino modificar) el archivo "css/estilos.css"

less_con_PHP/index.php

Código PHP:

Ver original<?php
require 'lessphp/lessc.inc.php';
$less = new lessc();
try { lessc::ccompile('css/less/estilos.less', 'css/estilos.css'); } 
catch (exception $ex) { exit('lessc fatal error:<br />'.$ex->getMessage()); }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css" />
</head>
<body>
    <a href="#">test enlace</a>
    <h2>test h2</h2>
    <div>
        <p>Hola <span>mundo</span></p>
    </div>
</body>
</html>

Finalmente linkeamos la hoja de estilos (que se va a ir modificando sola "dinamicamente" digamos ya que siempre trabajaremos en "less_con_PHP/css/less/estilos.less")
<link rel="stylesheet" type="text/css" href="css/estilos.css" />

Un abrazo.

alexk · #14 (**permalink**) 03/09/2011, 10:16

bien cristian_cena yo lo implemente con js... ya que entiendo un poco mas que php pero bueno... sigo haciendo pruebas y aun no obtengo el resultado que quiero es decir...

si tengo 2 divs y quiero que tengan 300px y 600px de ancho hago lo siguiente...

/*variables*/
@w300: 300px;
@w300_2: @w300 * 2;

/*codigo*/
.midiv{ width:@w300}
.midiv_2{ width:@w300_2}

el caso es que si voy a escribir ".midiv_2{ width:@w300_2}" ya puestos escribo ".midiv_2{ width:600px}"... entienden?... me seria muy util como comentaba si pudiera usarlo en mis clases ".w300" y ".w300_2" me seria todo mas "automatico" almenos en mi modo de trabajo no me agiliza en casi nada...
aun que estoy seguro de que es posible "adaptar" este recurso a mis necesidades... la cuestion es el como... ya que no controlo PHP ni JS... tocara esperar a que evolucione un poco mas... o bien que alguien que se haya tomado mucho mas tiempo explotando este recurso nos de ejemplos por que yo no veo por donde...

cristian_cena · #15 (**permalink**) 04/09/2011, 05:26

alex, estoy muy verde con less como para sugerirte algo.

Pero para llevar a cabo lo que necesitas habría que parsear el html, todo el dom para interpretar las expresiones de el atributo class de cada nodo. Sería crear algo nuevo, como indica cvander.

Saludos.

cristian_cena · #16 (**permalink**) 19/10/2011, 01:15

aquí encontré un muy buen artículo explicativo sobre less. Cada vez me gusta más esto :)

Bravenap · #17 (**permalink**) 20/12/2011, 02:13

Muy buenas. Yo descubrí LESS en la pasada conferencia El camino a CSS4, de Christian. Por cierto, interesantísima y con muchos y muy buenos ejemplos, enhorabuena Christian.
Acabo de empezar a usarlo (la implementación JS), en principio sólo por el tema de las variables, pero cada vez descubro más posibilidades y me está gustando: anidación, gradaciones de color partiendo de una base, etc.
Sólo tengo una duda ¿qué hay de cara a la validación CSS del W3C?

Un saludo.

PD: ¿el hilo no es muy antiguo, no? Sírvanse los administradores de "administrarme" si lo es.

ZoroRoronoa · #18 (**permalink**) 20/12/2011, 10:20

Yo creí que LESS casi nadie le tomaba importancia...
Tiene tiempo que lo conozco, y no decidí meterme en ello.

Hasta ahora que veo que muestras gran interés, tendré que empezar...!!

Fuck... porque no empecé antes.

cristian_cena · #19 (**permalink**) 20/12/2011, 12:04

Bravenap, de cara a la validación, la misma que siempre, pues a producción mandas los css finales compilados.

Saludos.

Bravenap · #20 (**permalink**) 20/12/2011, 12:19

Gracias por la respuesta cristian_cena. Pero esa compilación es invisible cuando se se usa LESS en servidor. Si es en cliente es la librería Javascript la que la realiza, por tanto, el validador W3C no te va a coger el resultado compilado ¿o sí? Es más, dudo que te valide un archivo .less (yo lo pongo como .css aunque en la etiqueta le indico "stylesheet/less").

Un saludo.

cristian_cena · #21 (**permalink**) 20/12/2011, 12:40

Claro tenes razón, ahí ya no sabría decirte.
Ahora, como w3c no validará los .less tal vez te convenga vincular directamente los .css finales, compilándolos para ello por ejemplo con php (#13).
Con node.js no se como pero también es posible.

Bravenap · #22 (**permalink**) 20/12/2011, 12:49

He hecho una prueba con las herramientas de desarrollo de Chrome en http://lesscss.org/ y sólo me reconoce como hoja de estilo la API de fuentes de Google, que tiene el atributo rel="stylesheet" y no main.less con atributo stylesheet/less. Creo por tanto que es más bien el atributo rel el que determinará una posible validación con W3C.

En cuanto pueda detallar algo más, lo contaré.
Un saludo.

jsgjavi · #23 (**permalink**) 18/02/2012, 13:49

Buenas, esto del atributo stylesheet/lees lo he comprobado y con opera ni con chrome funciona, ¿existe alguna solución para esto?

Bravenap · #24 (**permalink**) 19/02/2012, 17:02

Bienvenido a FDW jsgjavi. No sé si este tema ya es un poco antiguo, en cualquier caso, te cuento mi solución que probablemente no sea la más adecuada.

En la librería less he eliminado la opción de búsqueda del atributo rel="stylesheet/less", de modo que donde ponía:

Código Javascript:

Ver originali[k].rel==="stylesheet/less"

ahora es

Código Javascript:

Ver originali[k].rel==="stylesheet"

Y el vínculo a la hoja de estilo:

Código HTML:

Ver original<link href="css/estilos.less" rel="stylesheet" type="text/css" />

Es una solución rápida pero es posible que te afecte a otras hojas de estilo que tengas vinculadas. En mi caso sólo es una por lo que no me preocupaba demasiado.

Probado en Chrome y en IE9 sin problemas.

destinopolinesia · #25 (**permalink**) 20/02/2012, 02:48

Yo hace unos días por linkedin tope con información de compass, saas y un interface windows llamado scout y me tire hasta las tantas flipando con sus prestaciones y con el ahorro considerable de código que puede generar .. como alguien decía por arriba que le gustaba mas sass pues ahí van:

http://sass-lang.com/tutorial.html
http://mhs.github.com/scout-app/
http://sass-lang.com/docs/yardoc/fil...REFERENCE.html
http://compass-style.org/

yo desde luego estoy decidido a meterlo en mi blog polinesia2012.com pues carga el css a toda pastilla de veras buscar ejemplos y lo comprobareis

Bravenap · #26 (**permalink**) 20/02/2012, 03:58

Por lo que he podido ver muy rápidamente, Sass requiere Ruby ¿me equivoco? Al menos con LESS cargas la librería JS en cliente y marchando. Probablemente sea más eficiente el resultado con Sass, aunque ya no sé si tanto como generando con LESS en servidor.

Nano_Suarez · #27 (**permalink**) 27/11/2012, 18:45

Cita:

Iniciado por hombrelectrico

Me encanta LESS, me parece la herramienta del futuro para escribir codigo css...

La version de LESS que presenta el framework de twitter es en javascript. Yo en su momento realize varias pruebas con una version escrita en php (http://leafo.net/lessphp/).

El unico problema con el que me tope fue que no podia debugear con firebug el codigo procesado por less, pues las lineas del archivo fuente y el archivo procesado no coinciden.

Saludos

PD.: soy nuevo, hay forma de quitar la publicidad del header?

No se si llego tarde, pero existe el Fireless para usar como usas Firebug

A mi me preocupa más la viabilidad del proyecto, a todos nos gusta ser pioneros pero hay que ver que el proyecto avanza