Diseño WEB y Programación > DreamWeaver, Editores y Maquetacion Web
Recupera tu vida social gracias a LESS CSS
(1/1)
otaner:
Recupera tu vida social con este hermoso preprocesador conocido como LESS CSS, en pocas palabras el objetivo de este preprocesador es expandir las posibilidades de CSS. Eso significa poder hacer cosas realmente buenas y de manera mas fácil y el se encarga de compilar todo el CSS para que lo puedas ver en cualquier navegador.
¿Qué ventajas tiene usar LESS CSS?
Lo primero que quiero destacar es el hecho que puede trabajar ya sea por el lado del servidor mediante Node.js o Rhino y mediante el lado del cliente por medio de los navegadores.
Otra de las ventajas que tiene es el s de poder trabajar con variables, mixins y muchas mas opciones. De las cuales hablaremos más a fondo en este artículo.
Instalación
La instalación de LESS mediante el lado del cliente es tan facil como colocar en tu etiqueta <head></head> el link a tu hoja de estilo con la extensión .less (style.less) y el link del script de LESS.
Link del CSS:
--- Código: ---<link rel="stylesheet/less" type="text/css" href="styles.less">
--- Fin del código ---
Link del script:
--- Código: ---<script src="less.js" type="text/javascript"></script>
--- Fin del código ---
y así de facil es la instalación de LESS CSS.
Variables
Una variable básicamente sirve para especificar un valor y ese mismo valor reusarlo las veces que sea necesario sin necesidad de volver a escribir ese valor sino simplemente escribiendo el nombre de la variable en el caso de LESS CSS es así:
--- Código: ---@color: #4D926F; /*Defino mi variable color con una @ al principio y le defino un color*/
#header {color: @color;}/*En lugar de escribir #4D926F mando a llamar mi variable @color*/
h2 {color: @color;}/*Vuelvo a colocar mi variable @color */
--- Fin del código ---
De esta manera si debo cambiar el color de esa variable, se aplicara a todo aquello que tenga la variable y a la hora de compilar se vera algo así :
--- Código: ---#header {color: #4D926F;}
h2 {color: #4D926F;}
--- Fin del código ---
Realmente cuando comiences a usarlo no querrás dejarlo es lo máximo
Mixins
Como lo dice su nombre se trata de mezclar y el hecho es que puedes mezclar clases dentro de clases algo así:
--- Código: ---.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
--- Fin del código ---
El CSS compilado se vera así:
--- Código: ---#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
--- Fin del código ---
Conclusión
El hecho de usar un pre procesador nos ayuda mucho a ahorrar tiempo por las opciones que este nos permite y lo mejor de todo es que combinando los pre procesadores con programas como codekit del cual le escribiré en otro post, nos permite recuperar nuestra vida social LOL.
Dejo el enlace de LESS CSS para que puedan comenzar a trabajar y ahorrar tiempo y así que no te deje tu novia por no dedicarle tiempo LOL.
salvadoresc:
ya he visto algunas personas que le tienen miedo cuando ven mencionar variables y algunas de las caracteristicas de less, pero realmente es de una gran ayuda y su curva de aprendizaje no es muy pesada, vale la pena.
otaner:
La verdad de las cosas que LESS es uno de los muchos preprocesadores que hay esta stylus y sass que todos estos trabajan súper bien con codekit y combinandolos con un buen framework como 960.gs o lessframework(si quieres que sea responsive) te ahorras muchísimo tiempo y como decía @salvadores son bien fáciles de aprender.
Navegación
Ir a la versión completa