Introducción a Stylus

Clase 30 de 42 • Curso de Preprocesadores CSS

Resumen

Es el preprocesador CSS más reciente de los tres. Fue creado por TJ Holowaychuk (ex programador de Node.js) y escrito en JADE y Node.js.

Diego Fernando Rojas Quintero

student•

Manuel Alejandro Aguilar Téllez Girón

student•

Los de python no XDDDD

Addi Alberto Salazar Espinosa

student•

jajaja xD

Stiven Jiménez

student•

📌Aquí les dejo una extensión de Vscode que colorea la sintaxis de Stylus https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus si eres como yo que para no confundirte necesitas que la sintaxis este coloreada entonces te va a encantar esta extensión

Almudena Pardo Alvarez

student•

Gracias, me la descargué y la verdad es que ayuda mucho:)

Karla

student•

Gracias por la recomendación 😀

Sergio VO

student•

Para los que quieran compilar desde la terminal hacemos lo siguiente:

Instalar Stylus en la terminal

npm install -g stylus

Compilar de Stylus a Css [deben estar en la carpeta /css]

stylus -w ejercicio-stylus.styl

-w hace que espere los cambios para poder compilar automaticamente.

Luis Alejandro Vera Hernandez

student•

Se te agradece mucho

Kevin Andres Curruchich Xocop

student•

Excelente aporte, gracias

Manuel Alejandro Aguilar Téllez Girón

student•

Tú no eliges al preprocesador. El preprocesador te elige a ti. :')

Karla

student•

Así es 😉

Manuel Alejandro Aguilar Téllez Girón

student•

¿Cuál te eligió?

Never Andrés Aparicio Hernandéz

student•

la verdad es que uno se acostumbra a los corchetes y las comas

Addi Alberto Salazar Espinosa

student•

Es verdad :(

Michelle Verano

student•

Excelente curso, lo estuve esperando por mucho tiempo, finalmente esta aqui, pero solo por hacer la aclaracion, en el minuto 3:20 habla sobre la facilidad que tiene stylus de no necesitar abrir y cerrar los bloques de codigo y que lo diferencia de Less o Sass. Haciendo hincapie en que estos dos no tienen esta opcion, realmente no se de Less, lo he utilizado poco, pero Sass por su parte si tiene esta facilidad, y viene realmente a ser SASS como tal, y no SCSS.

Juan Castro

teacher•

¡Es cierto! La verdadera diferencia es que Sass sigue usando los dos puntos (:), Stylus sí nos permite escribirlos u omitirnos completamente. :relieved:

body
  font: 100% Helvetica
  color: red

https://sass-lang.com/guide

Bernardo Aguayo Ortega

student•

gracias por el dato

Aarón González

student•

Para quienes usen VSCode, deben instalar el plugin de stylus para que todo vaya genial.

Dato curioso por si les sirve :D

Fabian Bardecio

student•

Muchas gracias por el dato! Yo instalé language-stylus y funciona de 10!

Aarón González

student•

¡Genial @Khaleon! :D Cuéntanos, ¿cómo vas hasta ahora con el curso?

Jorge Cruz Perez

student•

Para los que seguimos los pasos del curso y descargamos los archivos de los enlaces del mismo hay un error en el html, El body esta vacío y el main esta fuera del html, como lo señalo en la imagen.:

La solución que yo hice en el archivo ejercicio-sass.pug fue cambiar el include por el extend y usar el tag block, como lo muestro en este post anterior.

Luis Eduardo

student•

Estaba a punto de devolverme a buscar el post anterior para recordar como era que se solucionaba, muchas gracias!!

Cristian Córdova

student•

Quizá es la costumbre pero se me hace mas legible y amigable ver todo el bloque de CSS con sus llaves corchetes etc

Diferencio mucho mejor un bloque de otro. En un archivo mucho mas largo solo con la identación me cuesta mas.

Jeremy Palomino

student•

Sabian que es Stytus el preprocesador que usan los Front-End's en Platzi?

Héctor Eduardo López Carballo

student•

No sabía! A mi me gusta mucho stylus, es muy bonito.

Fabian Bardecio

student•

Por ahora creo que me quedo con stylus, aunque va a tocar cambiar el chip de los {] y ; mientras iba escribiendo el código los ponía automáticamente, inclusive le pasó al profesor en algunas líneas jajaja.

Vania Cárdenas Andrade

student•

la extencion del archivo de stylus es .styl

además su sintaxis es diferente a los demás pre-procesadores porque no utiliza llaves ni punto y coma. Hay que poner atención a la identación del archivo.

Angel David Contreras Barrios

student•

Me gusta la sintaxis de este preprocesador

Efraín Hernández García

student•

En VSCode yo instalé esta extensión para tener colores en nuestro código de Stylus

Addi Alberto Salazar Espinosa

student•

Muchas gracias :)

Norma Yamileth Diaz Escobar

student•

No puedo ver el código tan pobre jaja. No me gusta sin corchetes y sin punto y coma

Hidetochi Junior

student•

Juan Gui Arenas

student•

Hola tengo un problema en VisualStudio, pues no me reconoce el archivo : Stylus

Omar Daniel Centeno

student•

Hola

Si ya instalaste el paquete para resaltar la sintaxis seguramente solo necesitas activar el paquete en VSCode para que comience a resaltar con colores el texto.

Haz una búsqueda en la barra con stylus. También puedes abrir el panel de preferencias y acceder a la parte de las extensiones. Verifica la configuración:

{
  // Use ':' as separator between property and value
  "languageStylus.useSeparator": true, // default value
  // Toggle matches for Stylus Builtin Functions on autocomplete
  "languageStylus.useBuiltinFunctions": true, // default value
  // Toggle colors preview
  "editor.colorDecorators": true // default value
}

También puedes probar con otras [extensiones de VSCode](uhttps://code.visualstudio.com/docs/languages/css que te pueden ayudar.

Juan Gui Arenas

student•

Gracias ya me funciono :D

Guillermo Baldán López

student•

No entiendo la necesidad de preprocesador más ¿Qué problema solucionaba este que no solucionaban los otros preprocesadores, less y sass?

Roger Carlos Ariel Alba

student•

Hola!

Cada preprocesador tiene sus fortalezas y espacios en los que su implementación es brillante.

Creo que más que "necesidad" es la demanda de la industria. No sabes si precisamente en este tendrás que trabajar en algún proyecto.

Victor Juan Morales Romo

student•

hola es importante que aprendas usar estos cuatro prepos ya que al la hora que te asignen a tu equipo de trabajo o tu los formes tendran que usar los para agilizar sus resultados ya que entre mas rapido trabajen mas clientes y mas dinero optenido.

con las ventajas de cada prepos que mejor a ti se te facilite trabajar.

asi es como yo lo veo y ademas aprendercomo funcionan antes de que todo se automatice tendras una ventajota que otros.

Cristian Emanuel Collazo

student•

Hola, tengo problemas para generar un archivo con extensión .styl en Visual Studio Code.

Nuevo archivo (Ctrl+n) Guardar (Ctrl+s) ejercicio-stylus.styl
Pero me agrega otra extension diferente ejercicio-stylus.styl.txt

VSC soporta stylus?

Cristian Emanuel Collazo

student•

Bueno encontré una extensión que soluciono el problema.

Name: language-stylus Id: sysoev.language-stylus Description: Stylus language support Version: 1.11.0 Publisher: sysoev VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

Juan Gui Arenas

student•

Hola gracias me sirvio ahora VSC le pone colores a las etiquetas etc, como se pueden cambiar esos colores ??

N40 M10

student•

Justo cuando eran obvios los inconvenientes de usar preprocesadores para css aparece stylus para solucionarlos, sin duda el mejor de los tres.

Pablo Andres Fernandez Cari

student•

Por el momento stylus me está gustando mucho mas pero porque todos usan Sass?

N40 M10

student•

No tengo idea, mi suposición es que apareció antes que stylus junto a less, así que la gente se acostumbro y lo utilizo en diferentes proyectos, lo que obliga a utilizarlo hasta la muerte o reconstrucción de ese proyecto.

Jonathan Amaya Mendieta

student•

Que interesante se ve Stylus, para mi SASS sigue estando en mi TOP.