Introducción a Sass

[@manu-mdp]

Te voy a decir como definimos a tipos como vos aca en argentina: MAESTRO... y no solo refiere a tu conocimiento sino a tu claridad para explicar y mostrar. GRACIAS

[@s.i.r.c.o]

mira que he visto varios tutoriales de Sass pero no habia entendido un cuerno...ahora que gracias a ti he implementado prepros y todas estas magias entiendo TODO!!...Gracias por compartir Alvaro..

[@vl9814]

Que gran profesor eres!, he estado empezando con Sass y al principio me daba hasta pereza instalar todo pero merece la pena, ademas trabajo con Atom y echándole un poco de tiempo conseguí compilar dentro del propio IDE que es lo que quería la instalación no fue tan difícil, instale un paquete de Atom para compilar directamente y que requería node.js y node-sass y ahora estoy contentísimo con el resultado.

[@duvanpantoja1994]

hola, estoy empezando con atom, y trabajo con sass, me podrías regalar los pasos de como hiciste que compilara en el mismo editor, busque el paquete node-sass en atom pero no lo encontré, te agradezco por la ayuda que me puedas dar.

[@pildorasdev]

hace un par de días estaba estudiando y descubrí el canal, muy bueno, felicitaciones hasta ahora con los vídeos que vi apoyo total!

[@joehigashi415]

He visto muchos tutoriales explicados por peruanos, y la verdad la gran amyoría que he visto son tutoriales exquisitos. Te agradezco enormemente. Es una mina de oro tu canal. Saludos desde Argentina! Merecés que te invite a un asado.

[@pitopintogorgorito4309]

Un genio. Eres un genio. Soy programador PHP, he creado mi pequeño framework para empezar a hacer trabajos web y al estar solo necesito saber crear interfaces gráficas y gracias a ti ya le perdi el miedo al HTML y CSS porque sin herramientas que simplifiquen la escritura del mismo es un quebradero de cabeza, ahora después de haber visto tus tres vídeos (prepros, sass y ed-grid) explicativos soy más feliz, literalmente estoy feliz porque podré hacer cualquier cosa con las UI sin tener que dedicarle horas y horas y horas a cosas tediosas. Simplemente gracias!!!

[@EDteam]

Jonathan Rodriguez me alegro que te sirva. Espero saber tus experiencias para poder apoyarte en lo que surja. Gracias por la buena onda.

[@teveoenlaweb]

Excelente esto esta muy chevere y pensar que no quería al principio por que me pareció enredado nada de eso, esta si es la mejor herramienta y forma de trabajar, Muchas gracias por este gran aporte

[@FabricioVargas91]

Alvaro muchas gracias por compartir estos tutoriales en forma gratuita.

[@benjigoenitz]

Genial, tus videos me han ayudado muchísimo y en poco tiempo he avanzado bastante en mi aprendizaje, lo curioso es que llegué a tu canal con el video de los cursos de Platzi que no valen tanto la pena, donde me divertía con sus chistes, pero no aprendía mucho. Gracias men, y ánimo con este proyecto.

[@EDteam]

benjigoenitz gracias!

[@wilberthloria8464]

mis respetos para sass y para ud. que magnifico

[@enmimaquinaandaba]

Esto es increíble, cómo pude vivir hasta acá sin Sass

[@oscarmayorga7461]

Muchas gracias! desde los primeros 3 minutos de tu video pude compilar mi primer proyecto en sass. Tu información super concisa!

[@manlikecreatures]

Gracias estaba buscando como empezar con sass pero todo esta en ingles, muy bien explicado. Saludos desde Bogotá Colombia

[@charlymatzu]

Desde hace un tiempo que conozco de estos preprocesadores pero no me he animado ni a probarlo, creo que ya es tiempo, gracias por la motivación y el tuto =D

[@dianasantisteban1446]

Gracias!!!!! Sass es lo máximo, espero y subas más videos de Sass... Estoy emocionada :)

[@ricardogottheil]

¡Excelente este vídeo! Recién estaba aprendiendo LESS, pero creo que mejor voy empezar con SASS. Me gustó mucho más que LESS. Saludos.

[@Ryuichi5004]

buenas noches estoy tratando de hacer esta practica pero el preposs no me muestra la previsulizacionestoy usando jade y sass, se esta realizando correctamente la complilacion y se crearon los archivos index.html y estilos.css. No se por qye no los puedo previzualisar con ningun navegador tego instalado chrome, firefox y explorer. ¿aque se devera?. Excelente video.

[@ernestogarcia6690]

Gracias por tu tiempo excelente contenido

[@RicardoGenovez]

Increible explicación, muy buena herramienta ni idea que existia.

[@thesunfall4760]

Excelente video. Por cierto, es preferible usar la versión de Sass basada en Dart, ya que es la que incluye las últimas características (como el @use).

[@mariocarlosm.m.6898]

Muy bueno como siempre. Saludos desde Mexico.

[@camilobolanoscordoba2972]

Como se llama al aplicas ion para tomar el color rgb que usas, gracias excelentes videos

[@gasYotube]

es un tutorial viejo sin embargo explicas muy bien (aun para personas que recien conocen este tipo de herramientas). Muy buenos tus videos.

[@Juanrojocapo1927]

Brutal este man, explica muy bien y free que es lo mejor

[@erickguevara368]

Buen vídeo amigo ! sería genial si pudieras enseñar una tienda virtual web, lo básico sería interesante ese vídeo!!!

[@cramyz]

Estoy impresionado, realmente..., tienes un basto conocimiento.

[@RamiroCode]

Muuuuy bueno. Gracias por ser tan explicativo, verdadera vocación de educador!

[@leorojas4282]

la verdad me ha sido un poco difícil de entender pero es cuestión de practica también, gracias Alvaro, sass es una gran herramienta :)

[@00Calixhh]

El siguiente vídeo?

[@josegalicia327]

Hola Felipe, buen día, es posible (y si tienes información me gustaría que me la compartieras= integrar Jade, Prepos en proyectos con Laravel, Yii o Rails? Saludos

[@JoanSubiratsLlaveria]

Genial! Esto es alucinante!

es mi primera vez usasando sas, se hacen los dos archivos con el mismo nombre .scss y .css y al guardar el .scss automaticamnte se actualiza el css?

[@GerardoArambuloAncco1991]

Genial, espero y en verdad espero tengas un video con mucho mas codigos. Felicidades ;)

[@kewinstivvalbuenarueda8575]

como puedo usar sass con el editor brackets???

[@toraplayred4070]

hola alvaro, quisiera que opiniones tiene acerca del editor de código brackets, nose si has tenido la oportunidad de probarlo.

[@euclidescohen]

Excelente trabajo, gracias por el esfuerzo y continúen así!

[@jhoedramplus]

jajajaja los vengaboys como banda sonora!! Gracias Alvaro, excelente video.

[@carmengarcia8]

hola quisiera ver tus videos desde cero, pero no se por donde comenzar

[@aprendeconmauricio]

Hola Alvaro, estoy viendo estos videos de hace un tiempo, tengo dos preguntas: 1. cual es la extensión que usas para el reloj dentro de la pestaña nueva del chrome aparte de la de pinterest? 2. Cuales son las extensiones que usas en tu navegador actualmente? Saludos, buen trabajo amigo, este canal realmente vale la pena

[@yeisonfabiantapialozano171]

Escuela Digital muchas gracias por el conocimiento

[@KristhianRocker]

hola alvaro....una pregunta... al subir los archivos al servidor. ... También se suben los scss y los jade?? o cómo es la cosa? gracias

[@leonardoriviere]

La explicación es excelente. ¡Muchas gracias!

[@brownie]

Buen video, una pregunta. Porque dices que el usar la extension .sass ya cayo en desuso? Que pasa si es que lo utilizo?

[@Nostradamus21b]

Te agradecería si en el futuro pudieses incluir algún mini-tutorial acerca de configurar el Live Preview de Jade. Extrañamente la página propietaría de Jade que instruye en esta área, está caída: :/

Y cómo instalas LIBSASS?

[@JeffreyDeveloperCOL]

Excelente video Maestro!! ¿ existen pre-procesadores para texto plano?

[@estebancordoba555]

Excelente!. Que monstruo para el código.

[@danielfruiz]

Excelente tutorial como siempre maestro, sólo me quedó la duda de porqué al final había que interpolar el valor y no así al comienzo, en verdad, no entendí en este caso el concepto de interpolación, si pudieras por favor explicarlo te lo agradecería mucho. Saludos!

[@gabrielmayta2297]

My bueno de verdad, eres muy bueno explicando, muy didactico , estaba indeciso entre Stylus y Sass pero gracias a tu buena introduccion decidi por Sass ;) :)

[@Nostradamus21b]

Excelente video. Te felicito, está muy bien explicado. Contenido clarísimo y sin interrupciones. Me has dejado el deseo de instalar Sass tan pronto como sea posible. Buscaré en tu canal si tienes parecido referente a Jade. En relación a lo que dice el amigo #benjigoenitz concurro en su crítica acerca de Platzi: ellos son excelentes profesionales en su área también, pero carecen de un elemento crítico en la enseñanza a través de Internet: PEDAGOGÍA (cosa típica de muchos profesionales que hacen clases). Saludos desde Chile.

[@williamgec]

Gracias, sincera mente he aprendido muchísimo mas con tus vídeos que con el curso de pago.... lastima que encontré tus vídeos ya muy tarde (cuando ya pague el curso de platzi.la y lo peor para 1 año NOOOOOooooooooo)

[@yuribarzola6431]

Yo también casi caigo en lo mismo pero me abrieron los ojos a tiempo.

[@untalbenitez]

Me gustan tus vídeos, un saludo y gracias!

[@Goloso333]

Muy bien, aunque vas a mil y hay que tener algo de conocimiento preconcebido para mas o menos seguirte el rastro pero bien. Apenas estoy incursionando en SASS y veo que es una erramienta muy poderosa. Ya me he suscrito a tu canal y le di like. Saludos!

[@Kyrakuum]

Excelente trabajo Alvaro, todos tus vídeos son de excelente contenido y muy bien explicados, no como los de Pla.....

[@carolinaperret8551]

Muchas Gracias por el video.

[@sanchez-emir]

Hola cual es la diferencia en las extenciones, veo .scss y .sass Ayuda por favor. Gracias.

[@EDteam]

scss es la extension actual, la otra ha caido en desuso

[@alexlugo9395]

Hola Alvaro, te he empezado a seguir y la verdad me parece un tesoro todos tus materiales, pero ahora que estoy aprendiendo Sass con tus talleres, escucho el termino BEM y SMACSS, sería mucho pedir un poco de explicación de esos terminos ? Mil gracias

[@EDteam]

Alex Lugo smacss es una metdologia para organizar tu codigo css por categorias. Segun smacss son cinco: layout (la posicion de los elementos en la estructura), base (los elementos html sin clases ni ID), modulos (elementos reutilizables), tema (los que le dan el look and feel a la web) y estados (para elementos que tienen estados diferentes como un menu en su estado colapsado y expandido). BEM es un metodo para organizar coherentemente las clases, viene de Bloque, Elemento, Modificador. En el ultimo video de este canal, he creado un proyecto completo usando Smacss y Bem. Además, si me da el tiempo (espero que sí) el proximo video será sobre Smacss, Bem y Oocss.

[@alexlugo9395]

Wow, como siempre muy claro en todas tus explicaciones y si estaria de super lujo pudieras hacer videos con esos 3 temas, estaré al pendiente, mil gracias !!!!

[@AlbertoRodriguezsgo]

Usas jade y no stylus. Tienes algun tutorial de stylus.? Saludos.

[@Angelux31]

Que excelente video! Gracias!

[@programandoConFelipe]

Gracias buen vídeo, no sabia que sass era tan poderoso

[@danielgemelo5133]

Una consulta, cómo haces para que cuando escribes "bg" te aparezca luego "Background"?

[@EDteam]

Daniel Gemelo yo creo mis propios snippets. Tengo bastantes. En este canal hay un video sobre como crear snippets en sublime, dale una mirada.

[@danielgemelo5133]

Escuela Digital gracias

[@toraplayred4070]

muy buen vídeo, sigue así amigo.

[@tuaguilareal]

hay que instalar algún paquete en sublime text para sass? con jade sí que dijiste que había que hacerlo, de ahí mi pregunta

[@EDteam]

Hola, si, igualmente hay un plugin para sass

[@LuigiZuniga]

JOOODEEER, que buen video !!!

[@servperu3919]

Al parecer tu plato preferido es el arroz con pollo. ¡EXCELENTE! buen tutorial. Gracias.

[@EDteam]

ServPeru jaja, pero no, mi plato favorito es el tallarín saltado (y)

[@Zaloganon]

Excelentes vídeos!!

[@jeremiasvaldivieso5800]

Increíble!! Esto es perfecto!!! :D

[@jhoedramplus]

Una pregunta Alvaro, recién me inicio en Sass y veo que se pueden usar 2 sintaxis: 1) .sass 2) .scss Me he descargado la última versión de prepros y no me compila .sass (el .scss si funciona bien), me crea la hoja de estilos, pero vacía ¿Sabes si el prepros compila .sass sin problema? Porque a mi no me está funcionando. Espero puedas responderme, y si alguno otro puede, también se lo agradeceré. Gracias

[@jhoedramplus]

Bueno en realidad me entró una curiosidad por .sass ya que su sintaxis no requiere o requería de llave de cierre, algo paradecido a jade. Por eso preguntaba, curiosidad.

[@pipers0123]

Jhon Edison para mi que estas usando con llaves.. pues la extension .sass no usa llaves, por que prepros si compila las dos extensiones!!!

[@JarEdSamuelStart]

Me gustó el video, justo estaba iniciando un proyecto con SASS. Seria buenísimo un tutorial de BEM y SMACSS ya que no hay en español! Pero OJO si se puede hacer con Stylus aquí te dejo el código codepen.io/started/pen/emxJab

[@JarEdSamuelStart]

Se llaman Hashes en Stylus

[@SoyXavierRomero]

¿El prepros es de paga?

[@JulioCanteroperfil]

Xavier Romero si. cuesta 29 U$D

[@shenplukiss2010]

muy nutritivo, gracias por el apoyo /../

[@cristianandresvargasgonzal6385]

gracias buen video.

[@progmell]

Waw, ahora me doy cuenta de la razon de que los @mixin no me funcionaban, y era porque estaba utilizando @import para la llamada del mixin, muchas gracias. 🤣🤣🤣❤

[@cristianlanderos4813]

excelente

[@nadamas6775]

muy copado! :D

[@juancarlosroman32]

suscrito, eres mejor que los de platzi :'v

[@isgg2580]

Que pedo Amigo... vos un Pro...

[@AntonioDofi]

Jajaja $arroz-con-pollo... ya le chillaban las tripas a Alvaro XD

[@Belero006]

Sut Up and take mi like and share, me he vuelto adicto a este canal :v es tu culpa Alvaro

[@esojanep76]

Genial!

[@DanielPk95]

Crei que sass aun se podia escribir, incluso es mas fácil, ignoras los ; y {}. Corrigeme porfavor si me estoy equivocando

[@osvaldoaurelio]

arroz con pollo hmmm que hambre

[@alejandrolondono1990]

Es mejor utilizar el .sass porque ya no tienes que poner los corchetes ni los ; Scss y sass no son los mismo

[@EDteam]

Sass es el nombre del lenguaje. Este lenguaje tiene dos sintaxis: scss y sass. La sintaxis recomendada es scss

[@alejandrolondono1990]

EDteam Gracias

[@oscard4801]

Si son dos sintaxis. Pero me paso igual en los archivos .sass a comparación de .scss no se utilizan {} y tambien ;. Es verdad que el .scss es mas recomendado hasta la pagina oficial recomienda esa sintaxis.

[@naiaramantistica2752]

"qué interesante*1000"

[@fdorantesm]

Estuve probando Less y es una porquería, cero intuitivo. Uso stylus y me está gustando sass :D

[@mark-if6sf]

Sabras Como hacer para que el 100 se incremente de 100 en 100 hasta 900 en background? $red-100: ‪#‎FFCDD2‬; $red-200: ‪#‎EF9A9A‬; $red-300: ‪#‎E57373‬; $red-400: ‪#‎EF5350‬; $red-500: ‪#‎F44336‬; $red-600: ‪#‎E53935‬; $red-700: ‪#‎D32F2F‬; $red-800: ‪#‎C62828‬; $red-900: ‪#‎B71C1C‬; @for$i from 1 through 9 { .red-#{$i*100} { /* Como hacer para que el 100 se incremente de 100 en 100 hasta 900 en background $red-100; $red-200; */ background: $red-100; } }

[@EDteam]

ewe No entiendo tu pregunta. Pero si necesitas funciones de color, existen bastantes en Sass. sass-lang.com/documentation/Sass/Script/Functions.html

[@mark-if6sf]

Escuela Digital para que adelante del background: $red- cambie de 100 en 100 hasta el 900