Aprende como escribir código CSS mas rápido utilizando Stylus, un pre procesador CSS que te permitirá crear hojas de estilos dinámicas.
Estoy seguro que si ya tienes tiempo trabajando con CSS quizas hayas escuchado acerca de los pre procesadores, estas herramientas que nos permiten escribir código mas rápido y fácil. Bueno pues hoy vamos a aprender a utilizar Stylus, un increible Pre procesador de CSS que nos da tantas herramientas como Sass, Less, Compass, etc.
Primero que nada, que es un Pre procesador ? Bueno pues un Pre procesador es una herramienta que nos permite escribir código con una sintaxis diferente y mas fácil para después compilar al lenguaje original. Un Pre procesador nos permite cambiar la forma en la que escribimos normalmente para asi tener todo mas ordenado, asi como también poder hacer uso de variables, funciones y operaciones que nos facilitaran mucho el tener que hacer cálculos.
Un ejemplo de lo que podemos hacer con stylus es escribir código asi:
body
font 14px Helvetica, arial, sans-serif
#logo
border-radius: 5px
Nos compilaría a esto:
body {
font: 14px Helvetica, arial, sans-serif;
}
body #logo {
border-radius: 5px;
}
Así que bien pues los dejo con unos links para que instalen Stylus y el tutorial sobre como utilizarlo.
Tutorial como instalar Stylus: https://www.falconmasters.com/tutoriales/instalar-stylus-mediante-nodejs/
Tutorial como instalar Snippets de Stylus: https://www.falconmasters.com/recursos-herramientas/instalar-snippets-de-stylus-sublime-text/
Como escribir código CSS dinámico con Stylus, Pre procesador CSS
Muy bueno el tuto, como siempre. ¿Esto afecta a la técnica de OOCSS?¿Se pueden utilizar juntas? ¡Gracias por todos tus turoriales!
No claro que no afecta, de hecho se puede trabajar mucho mas fácil OOCSS con stylus, inténtalo, si tienes alguna duda con alguna forma de escribir un selector o algo comentala y te ayudo. Saludos.
Dale, gracias. Saludos!
Hola carlos, tengo una pregunta con stylus solo se puede trabajar con un solo archivo?
A mi no me deja instalarlo :S me sale el siguiente error
Buena tarde Falcon sabes que plugin instalo para que el stylus se me autocomplete como el css. gracias
Creo que se llama Emmet
Se hace con los snippets:
https://www.falconmasters.com/recursos-herramientas/instalar-snippets-de-stylus-sublime-text/
Como uso esto con el Bootstrap?Jajaja
[…] Puedes echarle un ojo a Stylus, otro preprocesador muy bueno del que ya hablamos: Como escribir código CSS dinámico con Stylus, Pre procesador CSS […]
Por que al cambiar un archivo css a styl, no pasa con todo la sintaxis del stylus, por ejemplo queda con los dos puntos y en los hover no aparece los &, queda con una sintaxis muy parecida al nativo, eso se puede configurar para que pasa con la sintaxis de stylus?