comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[CSS][MEDIO] LessCSS

  • 1 Respuestas
  • 1067 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado WHK

  • *
  • Underc0der
  • Mensajes: 68
  • Actividad:
    0%
  • Reputación 3
  • 吴阿卡
    • Ver Perfil
    • WHK
« en: Julio 31, 2013, 03:16:17 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: CSS
  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: CSS
  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.
« Última modificación: Mayo 10, 2014, 07:13:46 pm por Destructor.cs »

Desconectado Xt3mP

  • *
  • Underc0der
  • Mensajes: 432
  • Actividad:
    0%
  • Reputación 0
  • Ellos me están buscando, pero yo los encontraré.
    • MSN Messenger - Xt3mP@h4x0rz.us
    • AOL Instant Messenger - Xt3mP@h4x0rz.us
    • Yahoo Instant Messenger - Xt3mP@h4x0rz.us
    • Ver Perfil
    • Xt3mP
« Respuesta #1 en: Agosto 03, 2013, 04:00:54 am »
Muy bueno esto, recomendado en su totalidad.

Otro ejemplo:
Código: CSS
  1. @niceBlue: #3f8ebf;
  2. @strongBlue: #4579ac;
  3. li:nth-child(even){
  4.         span{
  5.           float: right;
  6.           background-color: fadein(@strongBlue, 50%);
  7.           text-align: right;
  8.           padding-right: 15px;
  9.         }
  10.       }
  11.  

Sumado a ésto con bootstrap haces maravillas.

Saludos,
Xt3mP.
« Última modificación: Mayo 10, 2014, 07:13:02 pm por Destructor.cs »
Cada vez que me das Karma me motivas

 

¿Te gustó el post? COMPARTILO!



[JavaScript][MEDIO] Menu 'Mac' en Javascript

Iniciado por @ed33x

Respuestas: 0
Vistas: 1009
Último mensaje Enero 21, 2011, 11:54:30 am
por @ed33x
[JavaScript][MEDIO] Texto que aparece palabra por palabra

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1130
Último mensaje Febrero 24, 2010, 11:16:49 am
por ANTRAX
[JavaScript][MEDIO] Script ''cambia el color letra a letra''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1344
Último mensaje Febrero 24, 2010, 11:14:30 am
por ANTRAX
[HTML][MEDIO] Crea un banner con luces LED para tus perfiles con Mint Profile

Iniciado por godmurdoc

Respuestas: 0
Vistas: 1393
Último mensaje Julio 04, 2011, 04:04:02 pm
por godmurdoc
[HTML][MEDIO] Crear un reproductor de música utilizando HTML5

Iniciado por alexander1712

Respuestas: 0
Vistas: 1243
Último mensaje Enero 26, 2013, 02:22:28 am
por alexander1712