This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

[CSS][MEDIO] LessCSS

  • 1 Replies
  • 1966 Views

0 Members and 1 Guest are viewing this topic.

Offline WHK

  • *
  • Underc0der
  • Posts: 128
  • Actividad:
    0%
  • Country: cl
  • Reputación 11
  • Sin conocimiento no hay espíritu
    • View Profile
    • Yhojann

[CSS][MEDIO] LessCSS

  • on: July 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 (You are not allowed to view links. Register or Login) 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.

Code: (css) You are not allowed to view links. Register or Login
// 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);
}

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:

Code: (Css) You are not allowed to view links. Register or Login
/* Compiled CSS */

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

Si a alguien le interesa esta maravilla digital puede pasar por su web oficial: You are not allowed to view links. Register or Login

Saludos.
« Last Edit: May 10, 2014, 07:13:46 pm by Destructor.cs »
- You are not allowed to view links. Register or Login - You are not allowed to view links. Register or Login

Offline Xt3mP

  • *
  • Underc0der
  • Posts: 424
  • 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
    • View Profile
    • Xt3mP

Re:[CSS] LessCSS

  • on: August 03, 2013, 04:00:54 am
Muy bueno esto, recomendado en su totalidad.

Otro ejemplo:
Code: (css) You are not allowed to view links. Register or Login
@niceBlue: #3f8ebf;
@strongBlue: #4579ac;
li:nth-child(even){
        span{
          float: right;
          background-color: fadein(@strongBlue, 50%);
          text-align: right;
          padding-right: 15px;
        }
      }

Sumado a ésto con bootstrap haces maravillas.

Saludos,
Xt3mP.
« Last Edit: May 10, 2014, 07:13:02 pm by Destructor.cs »
Cada vez que me das Karma me motivas