Aprende como escribir código CSS mas rápido utilizando Stylus, un pre procesador CSS que te permitirá crear hojas de estilos dinámicas.

Share on Pinterest
Comparte con tus amigos










Enviar

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:

Nos compilaría a esto:

Así que bien pues los dejo con unos links para que instalen Stylus y el tutorial sobre como utilizarlo.

 

Tutorial como instalar Stylus: http://www.falconmasters.com/tutoriales/instalar-stylus-mediante-nodejs/

Tutorial como instalar Snippets de Stylus: http://www.falconmasters.com/recursos-herramientas/instalar-snippets-de-stylus-sublime-text/

Como escribir código CSS dinámico con Stylus, Pre procesador CSS

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Alejandro

    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.

      • Alejandro

        Dale, gracias. Saludos!

  • Cristian Torres

    Hola carlos, tengo una pregunta con stylus solo se puede trabajar con un solo archivo?

  • Jesus Silva

    A mi no me deja instalarlo :S me sale el siguiente error

  • Jose Gómez

    Buena tarde Falcon sabes que plugin instalo para que el stylus se me autocomplete como el css. gracias

  • Brayan

    Como uso esto con el Bootstrap?Jajaja

  • Pingback: Escribe CSS como un PRO | Curso Básico de SASS()

  • David

    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?


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso