Como escribir código CSS dinámico con Stylus, Pre procesador CSS
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Aprende como escribir código CSS mas rápido y dinámico con Stylus, un increible PreProcesador CSS.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
♦ Como instalar Stylus:
www.falconmaste...
♦ Como instalar Snippets Stylus en Sublime Text 2:
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com
Eres muy bueno, hasta ahora no he visto a nadie ensenar con tanta sencillez y facilidad y sobre todo muy entendible, Gradcias por el aporte
realmente muy didáctico este tutorial, sin muchos rodeos aclaras lo básico y elemental a la perfección, un agrado aprender así estas nuevas técnicas para ahorrar trabajo y lograr orden con un poco de abstracción...muchas gracias!!
muuuuuuuuuuchisimas gracias carlos... esperaba este tutorial, fui el que te lo pedi en ASK :D
Ya vez como si te hice caso :D. Muchas gracias a ti!
Genial Falcón esto me servirá para un proyecto que estoy desarrollando, felicidades por el Tutorial muy bien explicado, gracias
Me alegra que te sirviera :D
Si muchas gracias
Falcon es muy completo tu video gracias eres genial saludos desde el salvador
Eres lo mejor de lo mejor
Exelentes Videos.... me an servido tus Cursos de CSS
Excelente tutorial Falcon... Stylus es buenísimo y practico, me gustaría que hicieras una pagina utilizando stylus para ver como lo podemos aplicarlo a nuestros proyectos:..
Si, yo creo voy a hacer unos videos haciendo un sitio con stylus.
carlos me encanto stylus :D... eres el mejor explicando!! .... espero que mas adelante puedas hace un tutorial cualquiera pero usando stylus para ir familiarizándonos mas... (Y)
Si, yo creo haré algún proyecto para aprender a usar stylus mejor.
Muy bueno la verdad me gusto el tutorial colega saludos
hola disculpas dices -c -> compilar si no me equivoco , pero -c no es que se va crear en una linea en el .css osea se va comprimir si ponemos stylus estilo.styl en el cmd esta compilando y si pones stylus estilo.styl -w esta escuchando uhmmmmmmmmmm
gracias!
Interesante tutorial, lo probare. Gracias che
Buenisimo maestro gracias y like
Gracias a ti!
Muito bom
cuando pones border radius se hace todo automatico, que plugin me recomendas para vscode editor? en el minuto 13:35. Desde ya muchas gracias saludos!!
Cual piensas que es el.mejor pre procesador.. stylus,sass,less? Gracias
Muchas gracias por este tutorial Carlos, muy útil.
Solo una pregunta.... Cómo se puede compilar directamente desde un servidor? Yo casi nunca trabajo en local..
Gracias!!
La verdad no sabría responderte esa pregunta, si que se puede pero no se hacerlo. Seria que revises en su pagina como conectarse a un servidor.
Genial, excelente tutorial, un favor amigo Falcon podrias decirme que plugins de Sublime Text usas? Gracias de antemano
El único que tengo instalado ahora mismo es Emmet.
como haces para que en el sublime tu punto .styl lo vea como un archivo css para que te ayude al autocompletado?
Hola Falcon podrias enviarme el material de stylus. Yo descargue node.js para windows 10 pero no veo el node.js command prompt. que debo hacer. soy nuevo en el tema
Quiero saber cual es la funcion que hara un hosting en mi blog, ya se que me proporcionara un espacio en un servidor, pero ese espacio me lo esta proporcionando la plataforma donde tengo el blog, entonces mi pregunta es, cual es la diferencia?, y quiero sabes si podria resolver simplemente con un dominio para mi blog, osea quiero posicionar mi pagina. Es de noticas.
Interesante, pero ahora que estoy aprendiendo, creo que es mejor escribir todo sin usar esto, para coger más práctica con css..
Aun así, gracias por el video, es buena idea si vas corto de tiempo!
Si, se suele usar para proyectos un poco mas grandes en los que tienes que tener todo ordenado.
Hola yo utilizo Vcode, que complemento me recomiendas utilizar para que me autocomplete como lo haces vos en el minuto 13:30? Saludos!!
Hola,
marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer
Pero considera aprender herramientas como postcss autoprefixer para los prefijos
🤔 se puede decir que Stylus minifica nuestros archivos css verdad?
Hola Falcon, una pregunta, se puede escribir stylus por medio de emmet?
El css de salida, siempre tiene un formato "comprimido"? o se puede jugar con eso?
hey falcon como hago para instalar el plugin que mencionas
***** Buenisimo. Puedo usar el autocompletador emmet en stylus y que funcione de la manera convencional como con archivos.css?
Muy bueno perfecto para mi que soy vago :)
Hola Falcon tengo un problema a la hora de compilar mi archivo estilos.styl
UltraGox Que problema tienes?
No me genera el archivo .css cuando hago todo el procedimiento , y ya instale el stylus todo cuando doy stylus estilo.styl me manda algo así como prntscr.com/5cbtme
UltraGox
Lo que pasa es que tines un error en el codigo, si hay errores no lo compila.
ahh muchas gracias :)
Otra vez lo digo xD, haz un canal o streaming de Lol :D
O si, me olvidaba, por ejemplo en la función que usas para el borde radius solo es valido uno. Me explico:
border-radius(n)
Es valido también así?
border-radius(n,n,n,n)
Muchas gracias
Que estés bien (y)
La verdad nunca lo he intentado pero quiza se pueda porque N es una variable que usamos, en dado caso tendrias que usar otras letras, n,t,v,m y probar. Saludos
Ok muchas gracias, apenas voy a instalar node, no lo había usado antes pero no se ve tan complicado de nuevo gracias, ya que lo instale y comience una prueba te comento si funciono, buen día y un saludo
FalconMasters hola yo de nuevo, ya lo cale
Solo es hacer lo siguiente:
En la funcion solo se deja igual:
Función
border-radius(n)
Los estilos
border-radius(10px 10px 0px 0px)
Así funciona cuando se crea una caja con diferentes bordes redondeados
Heriberto Velasco Genial, me alegra que pudieras y sobre todo ahora saber como se hace :D
FalconMasters Sabes usar grunt, por que ahora me estoy quebrando la cabeza con eso, para poder desarrollar con la forma de refresh automático cada vez que modifico mis archivos, y no tener que estar dando el refresh en el navegador cada vez que hago cambios y estar cambiando ventanas a cada rato que este modificando codigo
Considero que stylus no te ayuda en nada, puesto que acabas generando un archivo en CSS3. Que te ahorra en escribir llaves y puntos y comas?...Eso solo es solo para las personas que no son ordenadas. Lo "dificil" de CSS3 no es la sintaxis, sino en el CONOCIMIENTO de cada uno de los selectores y atributos, y eso solo se logra con la practica, y con buena practica de CSS3, Stylus le hace un gran daño a quien quiere aprender CSS3. Por fin los exploradores aceptan un Standard, pues entonces apeguemonos a ese standard.