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

Подписаться 511 тыс.

Просмотров 32 тыс.

50% 1

Aprende como escribir código CSS mas rápido y dinámico con Stylus, un increible PreProcesador CSS.
🚀 Blog de diseño web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
♦ Como instalar Stylus:
www.falconmasters.com/tutorial...
♦ Como instalar Snippets Stylus en Sublime Text 2:
www.falconmasters.com/recursos...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmasters.com
♦ Curso patrocinado por okhosting:
www.okhosting.com

Наука

Опубликовано:

17 авг 2014

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@mariacristinaulloagarrido1224 6 лет назад

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!!

@edwinlonazcoayala8876 7 лет назад

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

@edwinfuentes6986 7 лет назад

Falcon es muy completo tu video gracias eres genial saludos desde el salvador

@LuisAngel87a 8 лет назад

Exelentes Videos.... me an servido tus Cursos de CSS

@edgargiobanny 7 лет назад

Muy bueno la verdad me gusto el tutorial colega saludos

@un.desconocido.en.internet 9 лет назад

Interesante tutorial, lo probare. Gracias che

@GabrielMartinezplus 9 лет назад

Eres lo mejor de lo mejor

@eduardofigueroahenriquez927 9 лет назад

muuuuuuuuuuchisimas gracias carlos... esperaba este tutorial, fui el que te lo pedi en ASK :D

@FalconMasters 9 лет назад

Ya vez como si te hice caso :D. Muchas gracias a ti!

@frial1000 9 лет назад

Genial Falcón esto me servirá para un proyecto que estoy desarrollando, felicidades por el Tutorial muy bien explicado, gracias

@FalconMasters 9 лет назад

Me alegra que te sirviera :D

@frial1000 9 лет назад

Si muchas gracias

@feliperico526 4 года назад

gracias!

@cumpacho4609 4 года назад

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!!

@jonhdoe1191 9 лет назад

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:..

@FalconMasters 9 лет назад

Si, yo creo voy a hacer unos videos haciendo un sitio con stylus.

@olm1974 9 лет назад

Buenisimo maestro gracias y like

@FalconMasters 9 лет назад

Gracias a ti!

@matiasacosta5382 6 лет назад

Cual piensas que es el.mejor pre procesador.. stylus,sass,less? Gracias

@eduardofigueroahenriquez927 9 лет назад

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)

@FalconMasters 9 лет назад

Si, yo creo haré algún proyecto para aprender a usar stylus mejor.

@alejandromarulanda9908 9 лет назад

Hola Falcon, una pregunta, se puede escribir stylus por medio de emmet?

@vict0rCaballero 8 лет назад

como haces para que en el sublime tu punto .styl lo vea como un archivo css para que te ayude al autocompletado?

@rodrigoecheverry4033 5 лет назад

hey falcon como hago para instalar el plugin que mencionas

@xandresglx 9 лет назад

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!!

@FalconMasters 9 лет назад

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.

@JarEdSamuelStart 9 лет назад

Genial, excelente tutorial, un favor amigo Falcon podrias decirme que plugins de Sublime Text usas? Gracias de antemano

@FalconMasters 9 лет назад

El único que tengo instalado ahora mismo es Emmet.

@ramosgot 7 лет назад

El css de salida, siempre tiene un formato "comprimido"? o se puede jugar con eso?

@justander_ 8 лет назад

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.

@rodrigoecheverry4033 5 лет назад

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

@MrLinpar 7 лет назад

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

@vitorregisonlima4961 3 года назад

Muito bom

@cumpacho4609 4 года назад

Hola yo utilizo Vcode, que complemento me recomiendas utilizar para que me autocomplete como lo haces vos en el minuto 13:30? Saludos!!

@luisolivares4031 3 года назад

Hola, marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer Pero considera aprender herramientas como postcss autoprefixer para los prefijos

@holgeredudangulocastillo645 2 года назад

🤔 se puede decir que Stylus minifica nuestros archivos css verdad?

@MarcelPernia 9 лет назад

***** Buenisimo. Puedo usar el autocompletador emmet en stylus y que funcione de la manera convencional como con archivos.css?

@sergih9258 9 лет назад

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!

@FalconMasters 9 лет назад

Si, se suele usar para proyectos un poco mas grandes en los que tienes que tener todo ordenado.

@jhonrv06 8 лет назад

Muy bueno perfecto para mi que soy vago :)

@UreRonny 9 лет назад

Otra vez lo digo xD, haz un canal o streaming de Lol :D

@NukemLabs 9 лет назад

Hola Falcon tengo un problema a la hora de compilar mi archivo estilos.styl

@FalconMasters 9 лет назад

UltraGox Que problema tienes?

@NukemLabs 9 лет назад

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

@FalconMasters 9 лет назад

UltraGox Lo que pasa es que tines un error en el codigo, si hay errores no lo compila.

@NukemLabs 9 лет назад

ahh muchas gracias :)

@frial1000 9 лет назад

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)

@FalconMasters 9 лет назад

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

@frial1000 9 лет назад

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

@frial1000 9 лет назад

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

@FalconMasters 9 лет назад

Heriberto Velasco Genial, me alegra que pudieras y sobre todo ahora saber como se hace :D

@frial1000 9 лет назад

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

@cpaez2000 9 лет назад

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.