elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  LessCSS (CSS Dinámico del lado del cliente)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: LessCSS (CSS Dinámico del lado del cliente)  (Leído 2,040 veces)
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
LessCSS (CSS Dinámico del lado del cliente)
« en: 1 Agosto 2013, 15:39 pm »

Hoy por hoy está de moda programar en NodeJS, ¿porque?...

NodeJS es un lenguaje de programación Asyncrónica (en hilos o threads) orientado al javascript pero ejecutado desde el lado del servidor.

Este lenguaje de programación ha resultado tan revolucionario que han aparecido una cantidad enorme de productos libres que están asociados a este, desde hostings que duran solamente su ejecución en node como Heroku, bases de datos no SQL de alto rendimiento como MongoDB pero también han aparecido frameworks y softwares que nos hacen la vida mas fácil delo lado del navegador.

Uno de estos se llama LessCSS y se trata de una tecnología creada en javascript la cual interpreta hojas de estilo a lo puro SCSS (http://sass-lang.com/) pero sin tener que ser compilado por el lado del servidor.

Por ejemplo, nos descargamos el archivo javascript de CSSLess y lo incluimos en nuestro proyecto, ahora creamos una hoja de estilo con extensión .less y tendremos todo el poder de una hoja CSS pero dinámica con opción de crear funciones, variables y modelos.

Código
  1. // LESS
  2.  
  3. .rounded-corners (@radius: 5px) {
  4.  -webkit-border-radius: @radius;
  5.  -moz-border-radius: @radius;
  6.  -ms-border-radius: @radius;
  7.  -o-border-radius: @radius;
  8.  border-radius: @radius;
  9. }
  10.  
  11. #header {
  12.  .rounded-corners;
  13. }
  14. #footer {
  15.  .rounded-corners(10px);
  16. }

Este código .less se puede compilar utilizando lessc desde el npm de nodeJS pero ahora podemos utilizarlo directamente desde el navegador utilizando esta librería en javascript.

El mismo código en CSS:

Código
  1. /* Compiled CSS */
  2.  
  3. #header {
  4.  -webkit-border-radius: 5px;
  5.  -moz-border-radius: 5px;
  6.  -ms-border-radius: 5px;
  7.  -o-border-radius: 5px;
  8.  border-radius: 5px;
  9. }
  10. #footer {
  11.  -webkit-border-radius: 10px;
  12.  -moz-border-radius: 10px;
  13.  -ms-border-radius: 10px;
  14.  -o-border-radius: 10px;
  15.  border-radius: 10px;
  16. }

Si a alguien le interesa esta maravilla digital puede pasar por su web oficial: http://less2css.org/

Saludos.


En línea

peib0l
Wiki

Desconectado Desconectado

Mensajes: 3.493


freedom


Ver Perfil WWW
Re: LessCSS (CSS Dinámico del lado del cliente)
« Respuesta #1 en: 3 Agosto 2013, 14:39 pm »

buena intro jeje, no te voy a dar opinión del post porque la verdad es que no lo he leído entero, solo quería decir que para los que como yo, os dedicáis al desarrollo web "Less" es una herramienta(¿lenguaje?) fundamental para optimizar tiempo y recursos, ademas todo queda mas limpio en un inicio.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ejecutar OCX del lado del cliente...
Programación Visual Basic
xWin2 1 1,845 Último mensaje 26 Julio 2005, 00:24 am
por Slasher-K
LLamar a una funcion desde lado cliente ASP.NET
.NET (C#, VB.NET, ASP)
USLO 0 2,387 Último mensaje 14 Mayo 2012, 15:57 pm
por USLO
Duda! LLamar a una funcion desde Lado Cliente ,con un objeto de video ASP.NET
Desarrollo Web
USLO 0 1,696 Último mensaje 14 Mayo 2012, 17:25 pm
por USLO
Ofuscar HTML del lado del cliente en LAMP
Desarrollo Web
bavo08 5 4,242 Último mensaje 2 Noviembre 2014, 02:23 am
por JorgeEMX
Securizando access token en aplicacion js de lado del cliente
Desarrollo Web
50l3r 5 3,066 Último mensaje 19 Julio 2016, 16:23 pm
por 50l3r
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines