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:

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

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

11 respuestas a “Como escribir código CSS dinámico con Stylus, Pre procesador CSS”

  1. Alejandro dice:

    Muy bueno el tuto, como siempre. ¿Esto afecta a la técnica de OOCSS?¿Se pueden utilizar juntas? ¡Gracias por todos tus turoriales!

  2. Cristian Torres dice:

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

  3. Jesus Silva dice:

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

  4. Jose Gómez dice:

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

  5. Brayan dice:

    Como uso esto con el Bootstrap?Jajaja

  6. […] 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 […]

  7. David dice:

    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?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso