Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

LESS: Usando CSS dinámico

17 Ene 2012 por Jose

Comentarios: 3

LESS

Cuando CSS nació solo era una herramienta para modificar algunos estilos básicos en una página web. Con el tiempo los desarrolladores encontraron una potente herramienta en este lenguaje, optimizando su uso no solo para cambiar estilos sino para ser capaz de controlar toda la parte visual de una página web en cualquier dispositivo que nos encontremos. Ahora han ido un paso más allá, creando herramientas de pre-procesado de CSS, que consiste en extenderlo para usar variables, reglas anidadas, mixins o funciones. Entre estas herramientas se encuentran LESS o SASS.

En este artículo vamos a hablar de LESS, ya que aunque las características de ambos son similares, la sintaxis de LESS es más parecida al CSS; además aunque ambos se escribieron en Ruby y necesitan instalarse en el servidor para ser procesados, los desarrolladores de LESS sacaron Less.js, que se ejecuta en el lado del navegador y que solo necesita incluir el enlace al código LESS.

Cómo empezar

Para poder usar esta herramienta debemos enlazar el fichero con extensión .less y poniendo el atributo rel como stylesheet/less:

<link rel='stylesheet/less' type='text/css' href='styles.less' />

Debemos incluir el script descargado less.js:

<script src='less.js' type='text/javascript'></script>

El fichero .less debe estar incluido siempre antes que el script.

Variables

Permite crear una única definición de un valor, y poder aplicarlo en cualquier regla del documento. Una variable se define con el símbolo @.

@color-web: #f6f1dd;
#header {background-color: @color-web;}
#footer {background-color: @color-web;}

El resultado en CSS será:

#header {background-color: #f6f1dd;}
#footer {background-color: #f6f1dd;}

Mixins

Es habitual repetir las mismas propiedades varias veces a lo largo del documento, veamos cómo simplificarlo.

.rounded-corners (@radius: 5px) {border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}
#main-menu li {.rounded-corners;}
#other-rule li {.rounded-corners(8px);}

El resultado en CSS será:

#main-menu li {border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
#other-rule li {border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}

Reglas anidadas

Para trabajar con la herencia simplemente iremos anidando los selectores unos dentro de otros, lo que facilitará su lectura.

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

El resultado en CSS será:

#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;}

El símbolo & se usa para concatenar un selector con su padre. Muy útil para casos como el :hover y :focus.

Funciones

A través de las funciones podemos modificar dinámicamente el valor de una propiedad.

@border: #2px;
@color-web: #012;
#header {border: @border solid @color;}
#footer {border: @border * 2 solid @color * 3;}

El resultado en CSS será:

#header {border: 2px solid #012;}
#footer {border: 4px solid #036;}

Conclusiones

El hecho de que esta herramienta esté basada en el uso de javascript impide su funcionamiento para los navegadores que no lo utilicen. Para estos casos el CSS no sería visible creando un problema en la web. También puede haber programadores que no deseen sobrecargar la web con otro script que provoque que la web cargue más lento.

Con la llegada de HTML5 los navegadores guardarán este CSS generado en el caché, por lo tanto este tiempo de carga se verá minimizado a una sola ocasión. Otra solución es utilizar programas como Less.app o WinLess, que compilan el código CSS e incluirlo después en tu web.

Más información

Comentarios

3 comentarios. Comentar.

4. Anónimo el 28 Ene 2012 a las 17:23:45

good

5. omar rojas el 20 Mar 2013 a las 21:28:15

hola felicidades por tu aporte a los que deseamos aprender mas sobres diseño web, bueno yo estoy comenzando con Less le he tomado un poco de importancia pero solo he visto que la unica ventaja es de reducir codigo osea es simplemente otra forma de escribir css, ya que comonentas en tus conclusiones que como es un sript de javascript tarda al cargar, pero con html 5 yo no tanto, en fin cual seria otra ventaja si me la pudieras nombrar para seguir con esta herramienta gracias por tu atencion.

6. Juanca el 18 Nov 2015 a las 11:36:50

Existe un motivo para esto y estoy deseando aplicarlo a mi blog de astronomia, se trata de poner dos botones en un gadget en los que el visitante pueda elegir entre:

Vista nocturna cuando está por la noche con el telescopio (estilo con colores teñidos al rojo y negro)

Vista diurna para cuando el visitante no necesita la vista nocturna ( estilo con la vista original del blog y todo su color)

Mientras no encuentro la solución a mi idea, he confeccionado un segundo e incómodo blog, clon del primero y en colores rojo y negro. Lo ideal sería que el visitante pudiera escoger la vista haciendo un clic en el blog y tranformar los estilos usando 2 hojas de estilo .CSS.

El problema es que estoy muy verde y no consigo acabar de hacerlo yo, me han dado los códigos pero no sé como aplicarlos, si alguien puede ofrecerme su ayuda estaría encantado.

He aqui una buena razón para dar uso a las hojas de estilo, gracias!

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?