he terminado el curso. sinceramente muy bueno. pensaba iniciar a crear una pagina con html, css y javascript. pero ahora que vi esto de SASS pienso incluirlo tambien. ahorra mucho tiempo y da una forma mas robusta de crear contenido
En Visual Studio Code al escribir el comando sass--watch sass:css me tiraba un "error"; lo solucioné de esta manera: abrí power shell en modo Administrador y escribí Set-ExecutionPolicy Unrestricted , luego poné (S). Listo podes continuar!
Hola Horacio, disculpa yo tambien tengo ese problema y veo que tu lo solucionaste, yo no he podido solucionarlo, te agradeceria que vieras mi mensaje y que me ayudaras. Saludos desde Colombia
Hola Ismael como estas, si recibes el mensaje primero que Horacio me gustaria que me ayudaras con este error que tengo en visual studio code, muchas gracias. Bendiciones, saludos desde Colombia
muchas gracias por el curso, renegue un poco al principio porque no tenia activado los permisos para la ejecucion de scripts en powershell y me tiraba un error al ejecutar el comando sass --watch pero pude solucionarlo y seguir avanzando, eres grande Alex!!
Hola amigo. Gran trabajo! Yo se que el video es de 40 minutos, pero, por experiencia, se que pudiste haberte tardado hasta 4 veces ese tiempo en editar, acomodar, generar el guión, los ejemplos, etc. Me encantó SASS porque yo vengo de BackEnd y pude entender desde un approach mas "amigable" cómo manipular y crear CSS :)
Hola!! Es probable que cuando instalen Sass globalmente les salte un error, se debe a que faltan los permisos de administrador para instalarlo globalmente, se soluciona con la palabra SUDO, entonces quedaria "sudo npm install -g sass"
"Hola, aunque este post es viejo, quizás pueda ayudar a otras personas con el mismo error que yo tuve. A mí me ayudó el no explicó esa parte. Lo que ocurrió es que no configuro correctamente el "git init" y es allí donde deben estar los scripts para que funcione. Aquí te dejo un ejemplo de cómo lo tengo yo configurado en mi proyecto." { "name": "menu-sass", "version": "1.0.0", "description": "Aprendiendo Sass", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "sass": "sass sass/index.scss css/index.css -w" }, "keywords": [], "author": "Veronica Del Valle", "license": "ISC", "devDependencies": { "sass": "^1.57.1" } } Para ejecutar en la consola npm run sass Asi deberian estar las carpetas creadas aprendiendo sass | |-- scss | |-- index.scss | |-- css | |-- index.css
Gracias por este tutorial Alex, tu explicación es tan clara que hace ver qué la programación web sea muy extravagante, muy atractiva y inspirar a jóvenes que quieran meterse al mundo de la programación Espero y puedas hacer un tutorial de canvas. Saludos!
Me ayudaste un bueeeeeen!! La única cosa (la más importante, creo) es que nunca me cargó bien la imagen... la ignora, creo que dejó de compilar.. todo lo demás me gustó mucho cómo explicas qué es y para qué sirve. :) GRACIAAAAS!!
En un futuro pienso pagar el curso de css3 porque tiene algunas cosas que no domino, ya que dentro de poco comenzare a trabajar como fronted. Me dedicare a mejorar lo mas posible y he visto que tu curso en udemy es el mas completo
@@juliansossa6487 falta poco. Me encuentro haciendo prácticas ya con vue 3 ( pinia, router@4 ) con tailwind... Ya he avanzado un mundo desde que coloqué ese mensaje. Pero todavía falta cosas que pulir
@@juliansossa6487 Aunque he estado aprendiendo mucho sobre css ( ya aprendí tailwind y ahora estoy aprendiendo Quasar para mejorar ese punto débil que tengo, con este ultimo me di cuenta que todavía es que falta un largo camino para ser un develop decente ya que vue apenas es un formato ( el SPA ) todavía falta el SSR, el PWA. Osea un montón de cosas por descubrir e ir aprendiendo poco a poco.
Alex una consulta, o cualquier persona que pueda responderlo, que diferencia hay entre @import y @use, porque tengo entendido que el primero actualmente está deprecado y que con el tiempo lo eliminaran pero cual es la diferencia en funcionalidad.
Hola, con @use podemos tener funciones, mixins y variables privadas, además de que para acceder a las variables, mixins y funciones tenemos que poner primero el namespace, esto ayuda por ejemplo que si tenemos 2 partials con el mismo nombre de variable, al poner el namespace estamos referenciando siempre a la variable del partial
@@AlexCGDesign ohhh muchas gracias, aprendí lo básico en SASS pero como trabajo con Tailwind no lo he prácticado pero siempre es bueno dominar varias tecnologías. Sigue haciendo videos así un abrazo.
Que diferencia hay en el comando npm install sass --save-dev y npm install -g sass? Entendi que uno es para instalarlo en el proyecto y el otro para instalarlo en el sistema? Estoy en lo correcto? Gracias
--save-dev sirve para installar como dependencia de desarrollo(cuando lo mandes a produccion no ocupan espacio) -g sass lo instalas de forma global y cuando lo mandes a produccion ocupara espacio, por eso lo mejor es hacer --save-dev si sabes que esa herramienta solo lo usaras en el entorno de desarrollo.
Alex, voy a comprar el curso de CSS en Udemy, pero no tengo cuenta de Twitter para mandarte la captura de la compra y así obtener el curso gratis de aprender a dibujar en CSS (mencionado en 40:25) ¿a dónde te puedo mandar la captura?
Muy muy interesante. Por cierto...para cuando un mini tuto o un tuto completo de TailwindCSS?? Me encanta pero no encuentro mucha info en español...solo en inglés
tengo una duda que me viene persiguiendo desde que aprendi a usar sass, la duda es, es necesario instalar localmente y globalmente en cada proyecto ???
Hola, Ayudaaaa. Hice todas las instalaciones para el SASS y cuando compila el SASS A MI CSS aparece todo menos los webkits o ms flex. No sé que hice mal ni sé como encontrar la respuesta. Gracias
¿Cómo puedo interpolar la variable dentro de un @for con @keyframes? por que supongamos que quiero llamas a " $tamano: '50%' " por ejemplo y trato de interpolarlo a: "transform: translate(#{$tamano} * $iterador);", y me da un error.
tengo 2 problemas, cuando doy CTL + S se crea un archivo de css en mi carpeta de sass, cosa que no debe pasar, el 2do problema esque cuando hago los cambios no se aolica de forma automatica, osea que tarde en hacer los cambios, como puedo solucionarlo?
¿alguien sabe si la hoja CSS se tiene que crear automáticamente o si hay que hacerla antes? porque a mi no me apareció ninguna en CSS, además ¿tiene que linkearse a HTML cómo de costumbre?
lo ideal seria que crees una carpeta para sass y una carpeta para tu css, al instalar sass en el proyecto se te va a crear la hoja de estilos para que puedas linkear
Muchas gracias por tu curso Álex . Me ocurre lo siguiente , al poner en la terminal, npm install -g sass me da esto npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/sass npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/sass' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/sass'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/sass' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /Users/pablocortes/.npm/_logs/2023-02-21T13_04_09_969Z-debug-0.log iMac-de-Pablo:~ pablocortes$ Se te ocurre qué puedo hacer?
Abro el video y dice "Sass es un lenguaje de programación". Ya arrancamos mal. Despues los que te escuchan van y repiten en una entrevista de trabajo y se les van a reir en la cara.
Porque los centro americanos hablan tan lento, o explican algo tan simple varias veces?. Si alguien no entiende solo tiene que pausar el video y volver a reproducirlo.... Los únicos que van directo al grano y no dan tantas explicaciones son los youtubers como soy Dalto y, por lo general, los de argentina.
FIJEN ESTE COMENTARIO 33:11, SI NO LES APARECE LA IMAGEN DE FONDO COMPLEMENTEN EL CODIGO //------------------------------------------------------------------------------------------------ background-image: linear-gradient(rgb(56, 56, 56), rgb(44, 44, 44)), url('../img/bg.jpg'); background-size: cover; /* Ajusta la imagen y el gradiente para cubrir el área */ background-blend-mode: overlay; /* Opcional: mezcla la imagen y el gradiente */ //------------------------------------------------------------------------------------------------ al principio no me mostro nada pero despues agregue el SIZE y el BLEND y funciono bien
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
Muchas gracias Alex! Excelente video 🎉
Excelente, me gustó mucho este curso. Tengo una pregunta ¿Aún está disponible el curso de sass gratis por la compra del de css?
La verdad, eres un genio explicando! ademas se nota tu pasion! sigue asi !
he terminado el curso. sinceramente muy bueno. pensaba iniciar a crear una pagina con html, css y javascript. pero ahora que vi esto de SASS pienso incluirlo tambien. ahorra mucho tiempo y da una forma mas robusta de crear contenido
En Visual Studio Code al escribir el comando sass--watch sass:css me tiraba un "error"; lo solucioné de esta manera: abrí power shell en modo Administrador y escribí Set-ExecutionPolicy Unrestricted , luego poné (S). Listo podes continuar!
Muchas gracias
Hola Horacio, disculpa yo tambien tengo ese problema y veo que tu lo solucionaste, yo no he podido solucionarlo, te agradeceria que vieras mi mensaje y que me ayudaras. Saludos desde Colombia
Hola Ismael como estas, si recibes el mensaje primero que Horacio me gustaria que me ayudaras con este error que tengo en visual studio code, muchas gracias. Bendiciones, saludos desde Colombia
A mi me tira error al escribir el comando node -v para chequear que versión de node tengo instalada
@@franbon2858es por qué no tiene creada la variable de entorno en archivos del sistema
muchas gracias por el curso, renegue un poco al principio porque no tenia activado los permisos para la ejecucion de scripts en powershell y me tiraba un error al ejecutar el comando sass --watch pero pude solucionarlo y seguir avanzando, eres grande Alex!!
Buen día David, tengo ese mismo problema, cómo lo solucionaste? Por favor!
Muy bueno, me explotó la cabeza
Hola amigo. Gran trabajo!
Yo se que el video es de 40 minutos, pero, por experiencia, se que pudiste haberte tardado hasta 4 veces ese tiempo en editar, acomodar, generar el guión, los ejemplos, etc.
Me encantó SASS porque yo vengo de BackEnd y pude entender desde un approach mas "amigable" cómo manipular y crear CSS :)
Hola!! Es probable que cuando instalen Sass globalmente les salte un error, se debe a que faltan los permisos de administrador para instalarlo globalmente, se soluciona con la palabra SUDO, entonces quedaria "sudo npm install -g sass"
"Hola, aunque este post es viejo, quizás pueda ayudar a otras personas con el mismo error que yo tuve. A mí me ayudó el no explicó esa parte. Lo que ocurrió es que no configuro correctamente el "git init" y es allí donde deben estar los scripts para que funcione. Aquí te dejo un ejemplo de cómo lo tengo yo configurado en mi proyecto."
{
"name": "menu-sass",
"version": "1.0.0",
"description": "Aprendiendo Sass",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "sass sass/index.scss css/index.css -w"
},
"keywords": [],
"author": "Veronica Del Valle",
"license": "ISC",
"devDependencies": {
"sass": "^1.57.1"
}
}
Para ejecutar en la consola npm run sass
Asi deberian estar las carpetas creadas
aprendiendo sass
|
|-- scss
| |-- index.scss
|
|-- css
| |-- index.css
nose si te sirva pero ejecutas powershell como admin y ejecutas "Set-ExecutionPolicy Unrestricted " le das que "s" y ya listo
yo lo resolví usando bash shell
me enamore del orden de sass, hace todo mas legible
muchisimas gracias por este curso, me gusto sass ya que hace todo mas facil!!!!
un curso genial para los que estamos entrando en scss
Gracias por este tutorial Alex, tu explicación es tan clara que hace ver qué la programación web sea muy extravagante, muy atractiva y inspirar a jóvenes que quieran meterse al mundo de la programación
Espero y puedas hacer un tutorial de canvas. Saludos!
😍😍😍😍😍 Bastante completo el curso...
Este video es una joya! Gracias por la tan clara explicación
gracias buen video, aprende un monton, te amo micky
Acabo de comprar tu curso de Sass, vi que enseñaste bastante cosas pero deberías hacer un proyecto con todo lo que enseñaste en el curso.
Me ayudaste un bueeeeeen!! La única cosa (la más importante, creo) es que nunca me cargó bien la imagen... la ignora, creo que dejó de compilar.. todo lo demás me gustó mucho cómo explicas qué es y para qué sirve. :) GRACIAAAAS!!
Eres grande, te deseo mucho éxito desde Argentina!
Excelente aporte, estaba buscando algún curso sobre esta herramienta. Gracias
Gracias a ti por el apoyo Giovanni!
Explicas muy bien, te ganaste otro suscriptor.
mil gracias,, me ayudo muchisimo tu video ya pude importar mis variables jejeje, no podia lo estaba haciendo desde el sass live y no me dejaba
Excelente clase. Gracias por compartir tu conocimiento.👍
Gracias a ti por apoyar Esteban;)
La verdad, un excelente profesor :D
En un futuro pienso pagar el curso de css3 porque tiene algunas cosas que no domino, ya que dentro de poco comenzare a trabajar como fronted. Me dedicare a mejorar lo mas posible y he visto que tu curso en udemy es el mas completo
Ya estas trabajando?
@@juliansossa6487 falta poco. Me encuentro haciendo prácticas ya con vue 3 ( pinia, router@4 ) con tailwind... Ya he avanzado un mundo desde que coloqué ese mensaje. Pero todavía falta cosas que pulir
@@juliansossa6487 Hace días tuve la entrevista... :)
@@juliansossa6487 Aunque he estado aprendiendo mucho sobre css ( ya aprendí tailwind y ahora estoy aprendiendo Quasar para mejorar ese punto débil que tengo, con este ultimo me di cuenta que todavía es que falta un largo camino para ser un develop decente ya que vue apenas es un formato ( el SPA ) todavía falta el SSR, el PWA. Osea un montón de cosas por descubrir e ir aprendiendo poco a poco.
¡Muchas gracias, amigo! ¡Me sirvió mucho tu explicación excelente! Dios te bendiga :D
gracias por tanto!!
muy buen video, gracias!
Hola Alex, deseo subir una página web por primera vez, tienes algún video como hacerlo, se que tienes recomendación de hosting, gracias!!
Joda mano el mejor curso
gracias, que bien explicas
Excelente vido.
Super claro y bien explicado
Explicas muy bien, gracias!
hola amigo excelente video, tengo un breve problema PowerShell no me deja ejecutar sass podrias crear un video al respecto
te agradezco
Si necesitan importar variables de un sass en otro archivo sass pueden usar @import en vez de @use.
Igual se pueden importar con @use solamente reverenciando al namespace:)
¡Muchas gracias por el aporte! ;)
Lo interesante sería agregar un @use "_variables.scss" as v;
Con ese alias no haría falta agregar variables.$color x ej en cada file tan solo v.$color
Muy bueno la verdad
Alex una consulta, o cualquier persona que pueda responderlo, que diferencia hay entre @import y @use, porque tengo entendido que el primero actualmente está deprecado y que con el tiempo lo eliminaran pero cual es la diferencia en funcionalidad.
Hola, con @use podemos tener funciones, mixins y variables privadas, además de que para acceder a las variables, mixins y funciones tenemos que poner primero el namespace, esto ayuda por ejemplo que si tenemos 2 partials con el mismo nombre de variable, al poner el namespace estamos referenciando siempre a la variable del partial
@@AlexCGDesign ohhh muchas gracias, aprendí lo básico en SASS pero como trabajo con Tailwind no lo he prácticado pero siempre es bueno dominar varias tecnologías. Sigue haciendo videos así un abrazo.
Gracias Alex
Gracias a ti;)
hola hay que instalar sass siempre que inicio un proyecto nuevo o simplemente tengo que hacerlo una sola vez y despues solo watch sass ?
Tengo una duda
Cuando referencias el partial, es con el nombre con guión bajo o sin el? Veo que funciona de ambas formas pero cuál es la buena?
Tampoco entendí cuando se necesita sintaxis de interpolación. Es que lo hace también cuando sustituye una variable
Que diferencia hay en el comando npm install sass --save-dev y npm install -g sass? Entendi que uno es para instalarlo en el proyecto y el otro para instalarlo en el sistema? Estoy en lo correcto? Gracias
--save-dev sirve para installar como dependencia de desarrollo(cuando lo mandes a produccion no ocupan espacio) -g sass lo instalas de forma global y cuando lo mandes a produccion ocupara espacio, por eso lo mejor es hacer --save-dev si sabes que esa herramienta solo lo usaras en el entorno de desarrollo.
Consulta tengo q repetir todo eso cada vez q abra un nuevo archivo ?
Los comandos son los mismo en ubuntu ?
Muy buena, como controlas jeje
Que crack alex
Alex, voy a comprar el curso de CSS en Udemy, pero no tengo cuenta de Twitter para mandarte la captura de la compra y así obtener el curso gratis de aprender a dibujar en CSS (mencionado en 40:25) ¿a dónde te puedo mandar la captura?
Holaaa, puedes mandarla a Instagram o Facebook, un saludo enorme!
@@AlexCGDesign tampoco uso esas redes sociales, ninguna de hecho. Pero te mandé un email con el screenshot
@@jaibux ¡perfecto! Lo reviso y te comparto el cupón:)))
que plugin usas sn vsc para que las carpetas s vean así
?
Muy muy interesante. Por cierto...para cuando un mini tuto o un tuto completo de TailwindCSS?? Me encanta pero no encuentro mucha info en español...solo en inglés
Claro, lo tendré en cuenta!
tengo una duda que me viene persiguiendo desde que aprendi a usar sass, la duda es, es necesario instalar localmente y globalmente en cada proyecto ???
Y si lo hago con Live Sass Compiler ?
cual es la diferencia entre live sass compiler y node?
Las nuevas funcionalidades, como por ejemplo el uso de forward
Buenardooo
gracias youtube por añadir velocidad en los videos, sino seria imposible ver este video
Hola, Ayudaaaa. Hice todas las instalaciones para el SASS y cuando compila el SASS A MI CSS aparece todo menos los webkits o ms flex. No sé que hice mal ni sé como encontrar la respuesta. Gracias
¿Cómo puedo interpolar la variable dentro de un @for con @keyframes? por que supongamos que quiero llamas a " $tamano: '50%' " por ejemplo y trato de interpolarlo a:
"transform: translate(#{$tamano} * $iterador);", y me da un error.
tengo 2 problemas, cuando doy CTL + S se crea un archivo de css en mi carpeta de sass, cosa que no debe pasar, el 2do problema esque cuando hago los cambios no se aolica de forma automatica, osea que tarde en hacer los cambios, como puedo solucionarlo?
contexto: este es el poder de sass xd
Juan Crimson , mi hijo se llamara asi
25:16
¿alguien sabe si la hoja CSS se tiene que crear automáticamente o si hay que hacerla antes? porque a mi no me apareció ninguna en CSS, además ¿tiene que linkearse a HTML cómo de costumbre?
lo ideal seria que crees una carpeta para sass y una carpeta para tu css, al instalar sass en el proyecto se te va a crear la hoja de estilos para que puedas linkear
¿Aún sigues regalado el curso de sass?
Muchas gracias por tu curso Álex . Me ocurre lo siguiente , al poner en la terminal, npm install -g sass me da esto npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/sass
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/sass'
npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/sass'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/sass'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/pablocortes/.npm/_logs/2023-02-21T13_04_09_969Z-debug-0.log
iMac-de-Pablo:~ pablocortes$
Se te ocurre qué puedo hacer?
Ponle marcas de tiempo
Abro el video y dice "Sass es un lenguaje de programación".
Ya arrancamos mal. Despues los que te escuchan van y repiten en una entrevista de trabajo y se les van a reir en la cara.
Lo observas?
tenes la voz de Marty Mc Fly :v
creo q te confundiste al inicio ya q sass no es un lenguaje de programacion
A alguien le pasa que al poner el comando inicial(node -v), les tira error?
si me pasa igual
pura carreta bme envia abajar otras aplicaciones que no necesito
sass NO es un lenguaje de programación bro y cuidado en decir esto en una entrevista a cualquier developer.
Genial. Me salió todo, menos cambiar las letras a blanco. No me funcionó esto:
&__texts {
color: #fff;
}
Porque los centro americanos hablan tan lento, o explican algo tan simple varias veces?. Si alguien no entiende solo tiene que pausar el video y volver a reproducirlo.... Los únicos que van directo al grano y no dan tantas explicaciones son los youtubers como soy Dalto y, por lo general, los de argentina.
Ponlo en 1.25 de velocidad y deja de llorar
odio sass
FIJEN ESTE COMENTARIO 33:11, SI NO LES APARECE LA IMAGEN DE FONDO COMPLEMENTEN EL CODIGO
//------------------------------------------------------------------------------------------------
background-image:
linear-gradient(rgb(56, 56, 56), rgb(44, 44, 44)),
url('../img/bg.jpg');
background-size: cover; /* Ajusta la imagen y el gradiente para cubrir el área */
background-blend-mode: overlay; /* Opcional: mezcla la imagen y el gradiente */
//------------------------------------------------------------------------------------------------
al principio no me mostro nada pero despues agregue el SIZE y el BLEND y funciono bien