Transcripciones
1. Introducción: Hola, soy Christopher Dodd y en esta clase vamos a aprender a recargar tu desarrollo CSS usando Sass. Sass es un lenguaje de scripting preprocesador que se interpreta o compila en CSS. Es esencialmente un lenguaje de programación que nos permite escribir CSS con características de
programación como variables, anidación, y cálculos. Por supuesto, antes de tomar esta clase, ya
deberías estar familiarizado con CSS. Pero si llevas un tiempo usando CSS, probablemente
te hayas enfrentado a algunas situaciones en las que has tenido que escribir selectores
ridículamente largos u olvidado el código hex o RGBA de un color que has estado usando a lo largo de tu documento. Bueno, estos son solo algunos de los pocos temas que Sass nos ayuda a resolver y confía en mí, una vez que empieces a usar Sass, no
querrás volver a la antigua forma de escribir CSS. Entonces como sugiere el título, esta clase va a ser todo sobre mejorar tu flujo de trabajo de desarrollo CSS con Sass. Veremos cómo funciona Sass, y luego empezaremos a usarlo, refactorizando el código CSS existente para utilizar algunas de las mejores características de Sass. Entonces si estás listo para recargar tu desarrollo CSS con Sass, click en el siguiente video y te veré por dentro.
2. Cómo funciona Sass: Antes de empezar a ver algunas de las características de los SASs, quería asegurarme de que todos entendemos cómo funciona realmente el SAs. Déjenme ser claro. SAsS no reemplaza al CSS, ayuda a generarlo. Como ya debes saber, HTML es el lenguaje de marcado para la web, CSS es el lenguaje que describe el estilo del HTML, y JavaScript es el lenguaje de programación de la web. Estos lenguajes son el estándar cuando se trata de desarrollo web
front-end y sASs no cambia esto. SAsS no es algo que pueda ejecutarse en tu navegador. En cambio, sAsS agrega otra capa a nuestro desarrollo de CSS. Se requerirá una pieza extra de software que tome el código SAsS y lo compila en CSS,
ese CSS compilado ahora se ejecutará en el navegador como un archivo CSS normal. Dado que CSS seguirá siendo el lenguaje de hoja de estilo de la web, ¿
por qué necesitamos agregar aquí una capa extra? La respuesta es que no necesitamos usar SASs en absoluto, pero usarlo solo facilita mucho las cosas una vez que empezamos a trabajar en proyectos más grandes. Para convertir el código SASs en CSS, se requiere
una pieza de software para compilar el código SASs, y este software podría estar basado en la nube o ejecutarse localmente. En la siguiente lección, demostraré las características geniales de los SASs usando una herramienta basada en la nube, y luego en la siguiente lección, aprenderemos cómo configurar una herramienta en su propio equipo para compilar SASs. Suena bien? Genial. Saltemos a la siguiente lección, donde empezaremos a escribir algunos SASs reales.
3. Las características principales de Sass: Como es el caso del aprendizaje de prácticamente cualquier tecnología en la web, el mejor lugar para empezar es el sitio web oficial. Estoy aquí en sass-lang.com y este es el sitio web para Sass. Como se puede ver, mucha información aquí. Voy a dar click en este enlace para aprender Sass. Aquí puedes ver una página de conceptos básicos de Sass. Estas son algunas de las características de las que vamos a estar hablando en este video. Si te pierdes en cualquier momento, solo
puedes venir aquí como referencia. Tenga en cuenta que para cada uno de estos ejemplos, hay una versión de Sass y una versión de SCSS. Vamos a cubrir la diferencia entre esos dos en esta lección también. No te preocupes por eso todavía, lo
cubriremos muy pronto. Para demostrar estas características principales, no
quiero empezar con la instalación de un compilador en su computadora todavía. Yo quiero meterme directamente en mostrarte Sass. Voy a empezar con un emulador de Sass basado en la nube aquí. Ese se llama sassmeister.com. Aquí puedes ver que ya está guardado algún código de ejemplo en el que ya he estado trabajando. Déjenme aclarar esto, y vamos a recrear ahora para ustedes, que puedan ver qué está pasando. Justo antes de empezar con la sintaxis de Sass, quería mencionar brevemente que si
aún no has estudiado CSS y sabes usarlo, entonces definitivamente ve y haz eso primero. Es decir, puedes aprender Sass y cómo genera CSS sin conocer CSS, pero es mucho mejor aprender CSS primero y luego aprender cómo Sass puede ayudarte a generar CSS. Simplemente que mencioné que estoy seguro que la mayoría de ustedes ya conocen CSS, y eso es lo que están aquí para aprender a escribirlo de manera más eficiente, pero para aquellos de ustedes que no conocen en absoluto CSS o no han pasado mucho tiempo con él, definitivamente
yo recomiendo dar un paso atrás. Hay un montón de clases en línea. Tengo una clase sobre Skillshare sobre HTML y CSS. Entonces sí, definitivamente te recomiendo que conozcas CSS antes de empezar a empezar con Sass. Entonces con eso fuera del camino, aprendamos realmente la primera característica importante de Sass y eso es anidar. Voy a ir aquí a la documentación, desplácese hacia abajo a anidar. Como puedes ver aquí en este ejemplo que han proporcionado, aquí
tenemos selectores de elementos, y están anidados dentro de este elemento nav. De lo que esto está haciendo se va a anteponer el nav en el frente de todos estos elementos para que puedas apuntarlos sólo cuando existan dentro de un nav. La otra cosa que notarás de Sass es que no
hay punto y coma al final de los estilos, y no hay tirantes rizados. mucha gente le gusta escribir código de esta manera. Todo esto se basa en la sangría. Con CSS, podemos agrupar todo esto en una sola línea, pero con Sass, definitivamente tenemos que tener líneas y sangría. De lo contrario no sabrá qué hacer, y terminamos escribiendo menos código porque no tenemos esos corchetes rizados ni punto y coma. Pero como verás muy pronto, esta sintaxis no es la forma habitual de hacerlo a la gente. Nos vamos a trasladar al SCSS en breve. Pero en realidad veamos un ejemplo diferente ahora mismo. Digamos que por ejemplo, tenemos un elemento de carta, y en ese elemento de carta tenemos el cuerpo de la carta, y en ese cuerpo podríamos tener un botón al que queremos apuntar. De acuerdo, así que haciendo esto a la manera Sass, puedo apuntar el cuerpo de la carta desde dentro de la tarjeta, como tal. Digamos que queremos tener un color de fondo de negro y un color de blanco. Ahora se va a generar el CSS y como puedes ver, se antepone la tarjeta al frente ahí. Pero también podemos ir otra capa más profundo, y tal vez queremos apuntar a un elemento de botón dentro de ese cuerpo de cartas. Sólo alternemos los colores aquí. Voy a hacer color fondo blanco, y el color del negro. Ahora puedes ver que aún tenemos carta antepuesta al cuerpo de la tarjeta, pero también tenemos nuestro elemento de botón seleccionado aquí con cuerpo de la tarjeta y carta antepuesta a ella. Esto viene realmente útil cuando estás escribiendo muchos elementos profundamente anidados. Si fuera a escribir un elemento de lista por ejemplo, y tal vez quiero transformar texto mayúscula. Todos estos son solo estilos aleatorios, por cierto, es solo para mostrarte cómo se generará en CSS. Se puede ver aquí que donde nos repiten mucho escribiéndolo en CSS. Bueno, en lugar de escribir tarjeta de
punto, cuerpo de tarjeta de punto y cavar en el elemento de esa manera, como lo
haríamos en CSS, en cambio podemos crear un árbol de indentaciones y saltos de línea, y lo va a crear para nosotros allá. Dicho eso, también podemos poner en un estilo para tarjeta aquí. A lo mejor queremos un relleno de diez píxeles. Podemos poner en nuestros estilos para ese elemento. También podemos anidar otros estilos dentro de él. Bastante cool. También está esta otra característica en Sass que utiliza el ampersand para apuntar a pseudo-clases. Una pseudo-clase es cuando tienes un colon después de un elemento, y tal vez es el primer hijo, tal vez es el estado flotante, tal vez es la pseudo-clase después de ese elemento. Uno común es flotar, y tenemos un botón justo aquí que va por aquí abajo. Podríamos escribir otra pequeña regla de estilo aquí para el estado de desplazamiento del botón. A lo mejor tenemos un color de fondo de gris en lugar de blanco. Esto va a funcionar, pero en realidad podemos hacer algo un poco más sexy que eso. Lo que podemos hacer es anidar esto dentro y usar un ampersand para acceder al padre o para hacer referencia al padre. Ahora vamos a sangrar eso. Ahora se va a generar y se puede ver que no tenemos que repetirnos con el uso del botón seleccionado de ese elemento, podemos usar el ampersand. Entonces un gran uso del ampersand, como vemos aquí, está apuntando a una pseudo-clase de un elemento. En realidad no tenemos que reescribir el nombre del elemento. Podemos simplemente anidarlo dentro con esa pseudo-clase. También lo podemos hacer para modificar clases. Digamos por ejemplo que teníamos un cuerpo de tarjeta gris. Digamos que usamos un sistema como BEM para escribir clases, que te mostraré en tan solo un segundo. Digamos que tenemos tarjeta, lo siento, cuerpo
de tarjeta, y usamos un modificador como gris. Por lo que conseguimos un fondo color gris. A ver lo que conseguimos aquí. Tenemos card-cuerpo pastoreo dentro de las cartas. Queremos darle un color de fondo de gris. Pero como se puede ver aquí, nos hemos repetido con el uso de card-body. Lo que podemos hacer es reemplazar esto por un ampersand. Ahora mismo esto está sentado en la tarjeta, así que solo necesitas sangrarlo una más. Ahora ya puedes ver, obtuvimos exactamente el mismo resultado que antes. Esto es lo que teníamos antes. Esto es lo que tenemos ahora. Como se puede ver, exactamente el mismo resultado. Eso es anidar. La siguiente característica cool que tenemos en SSAS son variables. Por lo que las variables son más utilizadas para los colores, pero también podemos usarlo para valores como este relleno, y nos da una ventaja de definir nuestros colores una vez y después
poder cambiarlos en un solo lugar y para que ese cambio vaya a lo largo de todo el proyecto. También nos permite dar nombres a cosas como, digamos por ejemplo queríamos llamar a este relleno medio. Bueno, podríamos establecer una variable aquí arriba. Hagámoslo ahora mismo. Medio - relleno de 10 píxeles, y luego podemos reemplazar este valor aquí por la variable. Vamos a obtener el mismo resultado en nuestro CSS. Pero, si necesitamos cambiar esto más adelante, tal vez queremos un valor más alto para el relleno medio, realidad
podemos entrar y cambiar la variable aquí y en cualquier lugar de nuestro documento que haga referencia a esa variable. Se tirará del último valor desde aquí arriba. Con mayor frecuencia sin embargo vas a ver variables utilizadas para los colores. Aquí mismo puedes ver que estamos usando tres colores diferentes tenemos negro, blanco, y gris. Obviamente la relación entre estos colores necesita tener sentido porque hay que tener contraste y todo eso. Lo que podemos hacer aquí arriba es escribir algunos nombres para nuestros colores y luego podemos usar la variable en lugar de escribirla explícitamente en nuestro documento. Voy a tener color-bg-dark. Esto nos va a permitir cambiar el color de fondo oscuro ahora mismo es negro. Pero podemos entrar y cambiar eso más tarde para todos los fondos oscuros si así lo elegimos. También voy a tener un color-bg -light, que será blanco. Ahí tenemos nuestro fondo claro y tenemos nuestro fondo oscuro. También vamos a tener color-text-light y color-text-dark. A colores muy básicos por el momento pero podemos entrar y reemplazarlos por códigos hexagonales. beneficio agregado de usar variables de color es que no tenemos que recordar locos códigos hex. Si en lugar de negro otra forma de representar el negro es así, podrías tener un código hexadecimal más loco entonces eso puede ser algo así. No sé que pudiera ser cualquier cosa. Pero ahora que tenemos nuestros colores definidos aquí arriba, ahora
podemos reemplazar nuestros colores explícitos con estos nombres de variables. Este color de fondo es el color de fondo oscuro, así que voy a cambiar esto aquí, y este es el text-light justo aquí. Queremos un texto de color claro sobre un fondo de color oscuro. Aquí tenemos el fondo de color claro y el texto oscuro. Tenemos lo contrario. También tenemos este gris. Yo sólo voy a llamar a este color-secundario. Podemos reemplazar eso por color-secundario y color-secundario. Veo que sólo lo estamos usando como color de fondo así que tal vez lo espacio un poco poniendo en fondo aquí, background-secondary. Una vez que eso recompila lo que hace automáticamente, ahora
veremos que tenemos exactamente el mismo resultado en nuestro CSS, pero aquí tenemos variables. Ahora lo que podemos hacer, es que podemos cambiar el fondo oscuro y se actualizará aquí. A lo mejor queremos usar algo agitado como esto, código hexadecimal, y ahora se puede ver que el color de fondo de oscuro en realidad sólo lo estamos usando una vez aquí, pero eso se va a actualizar. Podemos actualizar este color-text-light, pero tal vez este color gris sería mejor actualizar porque lo estamos usando en dos lugares. Vamos a cambiar eso a un gris claro en su lugar. Ahora se puede ver en cualquier lugar donde estamos usando esa variable se está cambiando por aquí. Ahora esto es, por supuesto, útil cuando quieres cambiar el aspecto general de tu hoja de estilo cambiando variables o colores en un solo lugar. Pero tiene el beneficio agregado de darte nombres
legibles para poner en tus atributos de color, especialmente cuando estás usando códigos hex. Ha habido numerosas veces en proyectos donde he tenido que buscar el código hexadecimal que necesito usar para ciertas cosas. Si estuviera usando SSAS solo podría nombrar a este color primario algo así como color-primary, y siempre que esté usando ese color en todo mi documento, solo
puedo escribir color-primary en lugar de tener que recordar un código hexadecimal que probablemente sea no va a ser tan simple como #000. Ese es otro gran beneficio de las variables. El siguiente largometraje que quiero mostrarte, y solo etiquetemos estas características ahora. Se trata de las variables de curso número 1, anidación, número 2. Echemos un vistazo a extensión/herencia. Esta tercera característica, podemos volver a los docs, desplazarnos hacia abajo hasta extender/herencia. Dice que esta es una de las características más útiles de SSAS. Permite compartir un conjunto de propiedades CSS de una seleccionada a otra. Honestamente no creo que sea tan útil y te mostraré por qué en tan solo un segundo. Pero en realidad copiemos su ejemplo y te mostraré lo que realmente hace aquí. Pongamos su ejemplo aquí mismo. Esto de aquí es un ejemplo de algo que no se aplicaron así que sólo voy a quitar eso por completo. El ejemplo que tengo aquí, un mensaje. Si miramos aquí abajo el CSS compilado, tenemos estos cuatro estilos de mensajes diferentes, que cada uno comparte estas tres propiedades. Pero luego dependiendo de si es un éxito, es un error o es un mensaje de advertencia, tenemos diferentes colores de fondo o borde. Como puedes ver aquí, ni siquiera
estamos ahorrando tanto espacio al tener SSAS. Si miras aquí es aproximadamente la misma cantidad de líneas entre el CSS de salida y el ejemplo aquí en SSAS. Esa es una de las razones por las que no soy un gran fan. El otro motivo por el que no soy un gran fan de los extiende es porque creo que podemos simplemente usar una clase modificadora secundaria. A lo que me refiero con eso, es en lugar de escribir todo esto, sólo
escribimos un mensaje con esas propiedades. Entonces podemos hacer todos estos sin la extensión. Entonces todo lo que necesitamos hacer en nuestro HTML, es asegurarnos de incluir ambas clases. Incluimos la clase de mensaje, e incluimos la clase de error de éxito y advertencia. Para que quede claro, este es ejemplo de ssas-lang, y luego mi ejemplo aquí mismo. Como se puede ver aquí, produce una cantidad similar de líneas para ambos. Si miras mi ejemplo, es una cantidad más pequeña alinea entonces desde el sitio web de SSAS. Haz tus propios juicios. Pero la única vez que creo que realmente tiene sentido usar se extiende en SSAS es cuando tienes dos elementos que deberían tener el mismo aspecto pero realmente quieres que la clase sea diferente. A lo mejor tienes JavaScript adjunto a este elemento o tal vez por la razón que
sea, solo tiene más sentido semánticamente tener la clase diferente, pero quieres que el estilo sea el mismo. Bueno en ese caso, definitivamente tiene sentido usar un extender. Pero es raro que tenga esas situaciones así que soy más fan
de escribir una clase base y luego siempre que necesite crear un elemento, solo
puedo tener la clase de mensaje y la clase de éxito en ella. Si quiero dejar esto un poco más claro, puedo tener mensaje—éxito, mensaje—error, mensaje—advertencia. Siempre y cuando ponga el mensaje de clase y mensaje—éxito en el elemento en el que quiero tener los estilos de mensaje de éxito, entonces estaré bien. En realidad podemos usar un ejemplo de anidación aquí. Podemos usar el ampersand en su lugar aquí. Esta es otra característica que sí disfruto de SSAS que podemos usar aquí mismo. Tenemos que sangrar estos también. Entonces como puedes ver, eso es mucho más compacto que escribir esto. Piéndese en sus propias mentes. No siento que extender sea tan poderoso, pero está ahí en caso de que necesites usarlo. Otra cosa que puedes hacer en SSAS es usar operadores. Esto no es particularmente útil. EVA es solo una característica de programación que puedes usar en SSAS. Vamos a crear una nueva sección para los operadores. Déjame desplazarme hasta aquí a los operadores. Solo tomemos este ejemplo palabra por palabra y lo pongamos en nuestro patio de recreo. Los comentarios que creas aquí en SASS donde realmente vienen a través en tu CSS. Por cierto, estos comentarios estándar CSS lo harán. Entonces esta es la forma en que puedes hacer comentarios en CSS y SASS, pero estos son solo comentarios puros de SASS. Por lo que estos en realidad no pasarán en tu hoja de estilo final, solo para que lo sepas. Al ver este ejemplo para los operadores, tenemos nuestro contenedor con un ancho del 100 por ciento y en realidad estamos haciendo algunas matemáticas aquí para averiguar el ancho del artículo y el lado al lado. Como se puede ver, la salida es el porcentaje final. Si eliminé este porcentaje del final de aquí, verás que los números llegan con la unidad. Entonces necesitamos ese porcentaje ahí dentro sólo para definir la unidad, pero debería quedar bastante claro lo que está pasando aquí. Estamos tomando valores absolutos de 600 en 960, y estamos convirtiendo eso en un porcentaje. Ahora estos anchos son sensibles, en lugar de solo 600 y 300 basados en un ancho de contenedor de 960. Si este ancho de contenedor fuera de 960, entonces podríamos simplemente quitar esto y sería lo mismo. Pero si queremos que estos contenedores sean sensibles, entonces deberíamos usar porcentajes. Esta matemática aquí nos permite usar eso. Nuevamente, no es una característica crítica del SASS. No me encuentro escribiendo mucho matemáticas en SASS, pero es una característica genial que si lo necesitas. Característica final de la que hablaremos en esta lección y probablemente esté ahí arriba en las tres
primeras de características geniales en SASS es mixins. mixins son funciones que verías en un lenguaje de programación, excepto que podemos usarlas en SASS. Yo sólo voy a copiar en un ejemplo aquí y luego podemos echar un vistazo a lo que está haciendo aquí. Voy a pegar en este flex de código mixin. Este mixin al igual que una función en cualquier lenguaje de programación, toma un argumento o un parámetro. Esta variable entrará en el mixin y se puede utilizar dentro del mixin. Entonces aquí estamos realmente incluyendo el mixin. Entonces echemos un vistazo a lo que eso resulta aquí. Lo que tenemos aquí es donde colocar este número de uno dentro de nuestro elemento flexed y lo estamos lanzando a esto casi como un generador, que nos va a dar estos cuatro atributos con ese número. O si lo cambio aquí a dos verás que se actualiza para todos ellos. Entonces el beneficio de esto es decir por ejemplo, no
estábamos usando este mixin y así lo acabamos de tener así. Ahora digamos por ejemplo, algo ha cambiado y queremos usar un valor flex diferente. Bueno, tendríamos que entrar aquí, cambiarlo en cuatro lugares diferentes. Diga tres ahí, tres ahí, tres ahí. Eso es un poco ineficiente y nos estamos repitiendo varias veces. En cambio, lo que podríamos hacer es finalizar eso en un mixin. Sabemos que cada vez que
cambiamos flex, queremos cambiar estas versiones con prefijo también al mismo valor exacto. ¿ Por qué no usar un mixin? Hacemos eso poniendo más el nombre
del mixin y luego podemos pasar ese parámetro en. Ahora bien, si nos desplazamos hacia abajo, vemos que obtenemos el mismo resultado. Como les mostré antes, solo
necesitamos cambiar un número y lo cambiará para los cuatro. Ahora esa es una rápida introducción de mixins, obviamente son muy potentes y podemos usarlos para una variedad de cosas. En el ejemplo, cuando realmente tengamos una página web HTML, te
voy a mostrar un muy buen uso de mixins y práctica. De hecho, les voy a mostrar usos prácticos de todas estas características en la práctica. Pero para este video, solo
quería darles una visión general de las características y una demostración de lo que realmente hacen. Ahora hay otra característica aquí. Hemos hecho operadores, extender y mixins, anidar variables. Aquí hay parciales y módulos. Hablaremos de eso en un video posterior porque aquí sólo tenemos un documento. No vamos a traer parciales, sino parciales,
si volvemos aquí,en si volvemos aquí, realidad
podemos crear archivos SASS parciales que contengan pequeños fragmentos. Podemos modularizar el SASS para que podamos poner nuestras variables en un solo archivo. Podemos poner nuestros extiende par y luego en un solo archivo, poner mixins en un archivo, y luego podemos traerlos. Pero veremos eso una vez que realmente tengamos configuración de
SAS en nuestro equipo y empecemos a trabajar con él. Esa es una rápida introducción al SASS. Si quieres conocer más al respecto, lo que acabamos de cubrir, puedes ir a esta página en la página web del SASS. Una cosa que quiero hacer antes de pasar al siguiente video y realmente instalar SASS en tu computadora es que quiero cambiar a SCSS. Si hago clic en este botón aquí, ahora de repente todo lo que hemos escrito se cambia a SCSS. Como mencionamos, el SCSS es igual que el SASS, pero para anidar usamos las llaves al igual que en CSS. Utilizamos puntos y comas para definir el final de una regla. En lugar de iguales y plus, usamos palabras más descriptivas como realmente tener un at mixin aquí y escribir en include. El beneficio de usar SCSS es que es compatible al revés con CSS, así que puedo lanzar CSS normal aquí y no habrá ningún problema, no habrá ningún error. A lo mejor quiero poner en el cuerpo una familia tipográfica de Times New Roman. Como puede ver aquí puede que sólo tenga que ponerlo entre comillas. Entonces como puedes ver aquí, sale de la misma manera en tu archivo CSS de salida. Esto es realmente bueno porque puedes tomar todo esto que acabamos de generar y si solo me deshago de lo que tenemos aquí, y tiro esta CSS palabra por palabra en nuestro SASS, no
se le ocurre ningún error en nuestro CSS. Entonces en realidad podemos entrar aquí y refactorizar esto si queremos. Puedo entrar y hacer algo de anidación y ya verás tenemos el beneficio de usar SASS, pero también tenemos la compatibilidad al revés con CSS. Es por eso que la mayoría de los ejemplos que verás en línea usan SCSS. Para el resto de esta clase, vamos a usar SCSS. SCSS significa Sassy CSS, creo. Es algo que desarrollaron después de hacer la sintaxis tradicional inicial de SASS porque se dieron cuenta, supongo que era mejor que se pareciera más a CSS. Hace que sea más fácil escribir cuando estás acostumbrado a escribir CSS. También como se mencionó, es compatible al revés por lo que solo puedo lanzar cualquier número de CSS a un archivo SCSS y funcionará. Eso es genial en el caso donde solo quiero escribir algo de CSS, pero solo tengo un archivo SCSS. Ambos van a trabajar en el mismo expediente. El uso de la versión SCSS tiene muchos beneficios. Como acabo de decir, vamos a estar usando SCSS a partir de ahora. Pero en su mayor parte, en realidad debería ser más fácil de entender usando SCSS porque sí se parece más a CSS. Probablemente me viste antes cuando escribía SASS, me estaba metiendo en el hábito de poner puntos y coma. Sólo estoy acostumbrado a escribir cosas de manera CSS. Creo que al usar SASS, la sintaxis SCSS simplemente tiene más sentido. Espero que hayan disfrutado de esta introducción. En el siguiente video, en realidad vamos a instalar algún software en tu computadora y este software va a compilar SASS para nosotros. espero con ansias. Te veré en el siguiente video.
4. Cómo configurar Sass en tu computadora: En la última lección utilizamos una herramienta en línea, SassMeister, para empezar realmente a ejecutar Sass in the Cloud súper rápido sin que tengamos que instalar Sass en nuestro equipo. Yo quería hacer eso rápido para que pudiéramos ver las características de Sass, conseguir una buena introducción al mismo. Pero ahora es el momento de instalar realmente Sass en tu computadora para que realmente puedas ejecutarlo en tus propios proyectos. En realidad vamos a usar un proyecto de ejemplo de mi página de GitHub en tan solo un segundo. Pero lo que quiero que hagas es dar click en este enlace para instalarlo, y aprendamos sobre algunas de las formas en que podemos ejecutar Sass. Ahora como puedes ver aquí, nos
da un montón de apps diferentes para mirar. Desafortunadamente, Sass no proporcionan su propio compilador, por las miradas de las cosas. Podemos usar Sass en la línea de comandos, pero en cuanto a aplicaciones, tienes una serie de opciones pagadas y de código abierto. La forma más fácil que he encontrado para ejecutar Sass en tu computadora es usando Sass Live Compiler dentro de VS Code. ¿ Qué es VS Code? Bueno, es sólo un editor de codificación que es proporcionado por Microsoft. En realidad es gratis, lo cual es bastante impresionante. Si busco VS Code en Google, va a ser el primer enlace, y como puedes ver es sinónimo de Visual Studio Code. Es un editor de código de identificación bastante bueno completamente gratuito y tiene algunas grandes extensiones en él. No necesariamente tienes que usar este editor de código y esta extensión dentro de él para esta clase. Pero hay tantas maneras diferentes de hacerlo, y esta es la forma más fácil que he encontrado. Es todo gratis, lo más automático posible, así que definitivamente lo recomiendo. Obviamente estoy en un Mac, así que me va a pedir que descargue para Mac, pero puedes elegir qué opción quieres descargar aquí. Ya lo tengo instalado en mi computadora, así que no necesito hacer nada más. También tengo el Live Sass Compiler ya instalado. Todo lo que necesitas hacer para eso es ir a la pestaña Extensiones de VS Code, escribir en vivo compilador de Sass, e instalar el de aquí. Dado eso, has instalado VS Code, y también tienes esa extensión instalada, realidad abramos un proyecto y
veamos cómo funciona esto. Puedes abrir cualquier proyecto que quieras, o puedes ir a mi página de GitHub, GitHub/Christopherdodd/SkillShare. Como dice aquí, recursos para todas mis clases en SkillShare.com. Si has hecho algunas de mis otras clases, deberías estar familiarizado con este repositorio. Aquí mismo he incluido este llamado Proyecto Clase Sass. Yo quiero que descargues este. Voy a descargarlo a mi directorio de códigos aquí. Una vez que eso haya terminado de descargar, queremos ampliarlo. Ahora podemos ver que está expandido. Queremos entrar en VS Code, abrir esa carpeta, un solo clic, y luego hacer clic en “Abrir”. Deshazte de esa pantalla de bienvenida. Como pueden ver tenemos dos archivos aquí. Un índice, que contiene nuestra página de aprendizaje, y nuestra hoja de estilo justo aquí. Tenemos algunos puntos de ruptura de respuesta abajo aquí, tenemos algunos componentes y tenemos nuestra base y reiniciamos aquí. Bastante básico. Lo primero que queremos hacer es hacer clic en Go Live aquí, y eso en realidad creará un servidor automático para nosotros usando VS Code. Voy a hacer clic en eso. Ahora puedes ver cómo se ve nuestra pequeña página web. Es totalmente receptivo. Obviamente no los colores más sexys, y tiene algunas afirmaciones bastante audaces aquí. Puede o no cambiar toda tu vida. Obviamente no es un redactor. Pero sí, este es nuestro proyecto. Si lo miras en el iPhone, es receptivo. Sí, esto es con lo que vamos a estar trabajando en los próximos videos. Tenemos un servidor en vivo funcionando, lo siguiente que queremos hacer es empezar a ver a Sass también. Vamos a entrar en nuestro archivo CSS, y vamos a escribir otros estilos. Esto es sólo para mostrarles que podemos conseguir que funcione. Tenemos otros estilos aquí y nuestro editor de códigos detectará automáticamente que ahora tenemos un archivo SCSS, así que hemos visto a Sass aquí abajo. Voy a crear otra etiqueta de enlace aquí solo copiando y pegando que otros estilos, deberíamos llamar a esto otros estilos no otro estilo, otrostiles.scss. Ahora puedes ver aquí vamos a incluir estos estilos aquí. También vamos a incluir otherstyles.css. Pero claro que ese archivo ni siquiera existe todavía. Acabamos de tener otrestiles.scss. ¿ Ponemos eso ahí dentro? Por supuesto que no, porque en realidad no podemos ejecutar SCSS en nuestro navegador. Lo que va a pasar aquí cuando corremos reloj Sass, es que ese archivo se va a generar para nosotros usando lo que hay aquí dentro. Ahora porque no hemos hecho nada aquí dentro, va a
haber nada generado aquí aparte de un comentario que dice no CSS. Vamos a escribir un poco de Sass. Una característica básica es que podemos anidar. Digamos dentro del cuerpo, dentro de la tarjeta, y vamos a hacer algo dramático como el color de fondo amarillo importante. Si guardo
eso, va a detectar cambios. ¿ Qué va a pasar por aquí? Puedes ver que nuestro archivo CSS se genera al instante. Si volvemos aquí, se
puede ver aquí el amarillo no está pasando. Eso se debe a que he tratado el cuerpo como una clase, no como un elemento. Ahorro que refrescará el Sass y ahora se puede ver el color de nuestras tarjetas se cambia a amarillo como se puede ver aquí. Enfriar. Podemos eliminar esto en cualquier momento. No es gran cosa porque cada vez que guardamos los cambios nuestro archivo SCSS, esto se regenera. En realidad sólo necesitamos administrar el archivo SCSS. Pero por supuesto el CSS de salida es lo que usamos en nuestro navegador y nos vinculamos en nuestro HTML. Sólo eliminemos esa porque eso fue sólo con fines de demostración. Voy a eliminar otros estilos y todas las referencias al mismo. Accidentalmente borré toda la carpeta ahí. No obstante, ahora tenemos a Sass corriendo en nuestro proyecto, y está compilando automáticamente nuestro Sass y SCSS. Ahora por supuesto, si no quieres usar VS Code y quieres usar algún editor de código, vas a tener que mirar una solución diferente. Esta es la forma más fácil y obviamente una forma completamente libre de hacerlo. Pero es posible que tengas tus preferencias sobre cómo quieres configurar tus herramientas de compilación. Si tienes tus propias preferencias, desafortunadamente, no
puedo pasar por todas las diferentes formas de ejecutar Sass en tu computadora. Definitivamente, echa un vistazo a ese enlace del sitio web. Tienes algunas opciones aquí, en realidad, creo que es Koala y Scout-App gratis, y puedes ir a su página web para averiguar cómo ejecutarlas. Pero he encontrado que ejecutar Live Sass Compiler en VS Code es súper simple. Todo lo que necesito hacer es solo ejecutar este Watch Sass y hace el resto por mí. Si todo te funcionó y ahora tienes a Sass compilando en tu computadora, entonces definitivamente es hora de entrar en el siguiente video. En el siguiente vamos a empezar realmente a refactorizar ese CSS que tenía antes en SCSS. Vamos a aprovechar algunas de esas características de las que hablé en la lección anterior. Espero verlos en el próximo.
5. Cómo convertir CSS a SCSS: Perdón por el inicio de esta lección, nos
he traído de vuelta a nuestro punto de partida original dentro del Proyecto Clase Sass. Me he deshecho de esos otros estiles.scss. Acabamos de tener nuestro archivo HTML y después tenemos el archivo CSS vinculado. Al igual que en el último video, vamos a dar clic en Go Live aquí en VS code para ejecutar el servidor, y ahora puedes ver nuestra página web se está mostrando. Lo que vamos a hacer es crear aquí un archivo styles.scss. Aquí puedes ver el código VS ha reconocido que tenemos un archivo SCSS, así que tenemos este botón Watch Sass aquí. Voy a primero de todo copiar todo, de estos estilos en nuestros estiles.scss. Ahorra en ambos, y ahora voy a dar clic en “Ver Sass”. Ahora puedes ver al instante hemos generado nuestros estilos de nuevo, pero usando SCSS. Como puedes ver aquí, en realidad
hay algunas otras cosas que el compilador de Live Sass ha agregado. Lo más notable es que tenemos algunas propiedades de navegador cruzado aquí. Display flex no funciona en algunos navegadores, por lo que automáticamente agrega la versión WebKit y Microsoft para que podamos maximizar la compatibilidad del navegador. Como puedes ver aquí, también
se agregan algunos atributos que estaban implícitos por nuestra hoja de estilos, que acaban de hacerlos muy específicos aquí. Aparte de esos cambios, esta es exactamente la misma hoja de estilo. Si volvemos a nuestra página web y actualizamos la página, debería verse exactamente igual, y lo hace. Lo que podemos hacer ahora es que podemos cerrar este styles.css. Ya no necesitamos mirarlo, y solo queremos trabajar desde este archivo styles.scss. Todos los cambios que hacemos aquí serán compilados automáticamente y colocados en este archivo styles.css, y ese es el archivo, por supuesto, que nuestro documento HTML utiliza para darle estilo a la página web. Pero no necesitamos preocuparnos con este archivo CSS generado. Podemos simplemente trabajar con el SCSS hasta que haya un tema, en cuyo caso queremos echar un vistazo y ver qué CSS está generando. Pero hasta ese punto sólo podemos trabajar por completo aquí. Ahora igual que te mostré en nuestra demostración, lo primero que quiero hacer es escribir algunas variables para los colores. Lo mejor es hacer los que están en la parte superior de tu documento. En lugar de variables, voy a poner colores. Echemos un vistazo a qué colores estamos usando, y démosles nombres. Aquí mismo tenemos un color de fondo de azul. Si miro el documento, la mejor manera que puedo describir este color azul es que es el color primario. Es el único color que sobresale. Acabamos de tener negro, blanco, que en realidad no son colores, y luego tenemos azul. Voy a nombrar esto en vez de azul, color fondo primario. Ahora vamos a crear esa variable aquí arriba, color de
fondo primario, y podemos configurarla en azul. Vamos a pasar y encontrar otras referencias a este fondo color azul. Este tiene un color de fondo ligeramente diferente. Aquí se puede ver en el encabezado lateral, estamos usando ese azul. Podemos reemplazarlo por nuestra variable recién creada. Desplazándose hacia abajo, podemos ver que la tarjeta tiene un fondo de azul. Podemos cambiar eso a fondo de color primario. Espera, no ese es el color de la fuente. No queremos cambiar eso, y creo que eso podría ser. Si guardamos nuestro documento, refresca la página, verás que nada ha cambiado. Pero como les mostré antes, si quisiéramos cambiar este color de fondo primario, tal vez va a ser un azul claro en su lugar, ahora se pueden ver todos los fondos han sido cambiados. El siguiente que cambiaré es el color de primer plano. Donde quiera que haya un color de fuente con blanco, voy a cambiar eso por color-font, digamos brillante. Copia eso. Escríbelo aquí. Hagamos nuestro brillante color de fuente blanco. Cambiemos eso aquí también, color-font-bright. Donde más estamos hablando de blanco, también lo
estamos haciendo aquí. Aquí también para sección-boletín. Aquí también, en realidad hay bastantes spots. Lo que hay que recordar aquí no es simplemente reemplazar cada vez que veas blanco, tiene
que tener sentido. Lo que estamos haciendo es que estamos describiendo el color aquí. Es importante cómo se llama esto. Este es nuestro brillante font-color. Por alguna razón en toda la web, verás que la convención es escribir color y luego escribir las palabras descriptivas después de él. Siempre podrías simplemente poner esto en reversa, primario-fondo color. Depende de ti. Es así como se hace por convención aunque. ¿ Qué otros colores tenemos aquí? Tenemos nuestro color de texto corporal. Entonces color-font, solo llamémoslo primario, y va a ser este código hexadecimal en particular. Voy a colocar eso justo en la parte superior, y voy a pedirlos un poco bien teniendo los colores de las fuentes primero y después los colores de fondo. Ahora podemos reemplazar a éste aquí. Este lo trataremos un poco más tarde, y como pueden ver aquí tenemos estos colores de fondo de negro. Voy a crear un color-fondo oscuro con valor de negro. Ahora cuando tengamos fondos oscuros, lo voy a reemplazar por mi variable. Al igual que tal. Genial. Ahora solo volvamos a revisar con nuestro documento, asegurarnos de que no hemos cometido ningún error grande. Bien. Este font-primario, no creo que sea el mejor nombre. Voy a llamarlo font-default en su lugar. Yo quiero mantener primaria describiendo aquí este color, el azul. Voy a llamar a eso color-font-default. Nuevamente, cómo nombras depende de ti. Pero noté que casi todo el texto es azul o blanco, con sólo esto abajo por la parte inferior, es ese color gris, ese triple color siete. Sólo voy a llamar a ese font-default en su lugar. También noté aquí abajo que tenemos un color de fuente de ese azul. Quiero llamar a este uno color-font-primary en su lugar. Creo que ese nombre tiene mucho más sentido. Voy a subir aquí, color-font-primary, azul, y aquí hay un color más. No necesariamente necesitamos crear variables de color para todos nuestros colores, justo donde tiene sentido. Aquí para el fondo de las luces, color-fondo-luz. Bueno digamos brillante por el sake de consistencia, y vayamos color-fondo-luz. Ahora tenemos definidas nuestras variables. En realidad tengo un error aquí en nuestra consola Live Sass Compilar. Al parecer tenemos una variable indefinida de color-fondo -brillante. Aquí vamos. Accidentalmente llamé a esta luz. Puedes llamarlo brillante o ligero, solo algo que lo describa. Ahora parece que estamos bien. Si refresco la página, todo está bien. Esa es la otra cosa a tener en cuenta es que si hay un error de Sass, no
se compilará en el archivo CSS. Cuando refrescas la página en tu documento HTML, es posible que no
veas un cambio, así que podrías pensar, oh sí, está funcionando. Pero luego revisas aquí y te das cuenta de que en realidad no está compilando los nuevos cambios. Simplemente está mostrando una versión más antigua del archivo CSS. Lo que quieres hacer es revisar periódicamente aquí abajo, asegúrate de que no haya errores de Sass, y si alguna vez experimentas algo un poco funky, no
sabes lo que está pasando, siempre
puedes comprobar la salida CSS y asegúrate de que se encuentre correctamente. Tenemos nuestras variables aquí arriba, y esto nos facilita hacer un poco de tematización. Digamos que en lugar de tener un fondo negro, queremos crear todos los fondos oscuros a gris oscuro, creo que eso es un color, y ahora se puede ver el contraste no es el mejor, pero en realidad podemos afectar a toda la oscuridad fondos en nuestro documento CSS. Esperemos que ahora se estén aclarando los beneficios de usar variables. Número 1, podemos cambiar la variable en un solo lugar, y el número 2, sólo le damos a los colores más de un nombre descriptivo. También el número 3 es si tenemos un código hexadecimal como este, no
tenemos que recordar el código hexadecimal cada vez que queremos usar ese color, solo
podemos usar este nombre en su lugar. Esos son algunos beneficios de almacenar tus colores en variables. Ahora como vimos antes, aquí
tenemos este color extra, que no está asignado a una variable. El motivo de eso es que este color es exactamente azul pero más oscuro en un 20 por ciento. Es exactamente este color oscurecido en un 20 por ciento. Para esto en realidad podemos usar una función. Hemos visto mezclas en Sass, pero en realidad hay algunas funciones incorporadas también. De hecho vayamos al sitio web y busquemos este. Voy a ir al cuadro de búsqueda aquí. No importa en qué página estés en
la página web de Sass y voy a buscar oscurecidos. Voy a dar clic en el resultado para oscurecer, y como puedes ver aquí, toma como primer parámetro un color en particular, y luego toma como segundo parámetro cuánto quieres oscurecer ese color. Como puedes ver aquí, algunos ejemplos, también puedes desaturar, hay muchas funciones diferentes. Si quieres ir a echar un vistazo a esta página, puedes colorear, ajustar de muchas maneras diferentes. Pero oscurecer es bastante fácil. Yo sólo voy a llevar el color aquí arriba, el fondo de color primario-desplazar hacia donde está oscurecido, y el segundo parámetro, voy a poner 20 por ciento. Vamos a ahorrar. Ahora recuerden esto está en estado de hover, así que si vuelvo a mi página web, y refresco la página, deberíamos ver ese mismo color oscureciendo un 20 por ciento al pasar el cursor sobre el botón, y reiterando esto de nuevo, es bueno para usar una variable aquí, porque si cambiamos este color de fondo primario a otra cosa, como un azul claro por ejemplo, y actualizamos la página. Desafortunadamente, aquí tenemos un error, me he olvidado poner en mi signo $. Si actualizamos la página, verás que oscurece el color predeterminado de ese botón, lo que reacciona a cualquier color que se almacene en esa variable. Si no tuviéramos una variable. Pongamos esto de nuevo a azul, y asegurémonos de que haya señales de $ ahí dentro. Si no usamos esta función, y acabamos de usar lo que tenía antes. Si cambiáramos el color del fondo de color primario-a azul claro, verás que sigue siendo ese mismo color que definimos específicamente,
por lo que la función oscurecida usando una variable es una buena manera de obtener el mismo color que el que has almacenado en la variable, pero simplemente manipulado de cierta manera. Va a reescribir esto de nuevo, color oscuro, fondo primario 20 por ciento, y también es bueno leer también. Podemos ver que este es el fondo de color primario, pero 20 por ciento más oscuro. No importa cuál sea ese color, cuando se cierne sobre
él, se va a d el color en un 20 por ciento, bastante cool. Voy a volver a cambiar esto a azul porque el azul claro es demasiado claro, y tenemos nuestro color azul de vuelta. El siguiente rasgo de SAS que quiero mostrarte en este pequeño proyecto es extensiones. Como mencioné antes, no soy un gran fan de las extencias. Creo que solo hay unas pocas situaciones en las que realmente necesitas usarlo. Pero sí tenemos una situación aquí abajo con los botones que podríamos refactorizar para usar extensión, así que hagámoslo ahora mismo. Si entro en mi index.html, podemos ver lo que he hecho se incluye dos cláusulas en cada botón, así que tenemos nuestro botón CTA justo aquí, y aquí abajo tenemos nuestro botón de newsletter. En lugar de usar extensiones, lo que me gusta hacer es simplemente agregar una clase de nivel base, por lo que como puedes ver, ambos
tienen diferentes nombres de clase en términos de subrayado del boletín de uno, botón de
subrayado, y el otro es CTA subrayado, botón de subrayado. Pero ambos tienen una segunda clase sobre ellos, lo que les da los estilos de botón base. Pero la idea detrás de usar una extensión en SASS es que solo necesitamos usar una clase, así que si solo elimino btn, la segunda clase de ambos, y guardo eso. Vuelve aquí, y puedes ver que hemos perdido los estilos de nivel base para nuestros botones aquí. Lo que voy a hacer es volver a nuestro archivo CSS aquí mismo, y en lugar de tener una clase para botón, voy a convertir esto en una extensión, así que aquí mismo, y para el estado de hover, voy a transformar ese en un extender, y luego para cada uno de esos botones, podemos incluir ese CSS, así que aquí abajo en botón CTA, voy a escribir extender btn, y luego voy a hacer lo mismo para el otro botón de newsletter. Puedo extenderlo aquí. Guarda, refresca aquí, o de hecho se actualizó para nosotros, y puedes ver que tenemos exactamente el mismo resultado que antes. Como puedes ver, realmente no hemos hecho mucho ahorro en términos de líneas de código. Pero lo que hemos hecho es reducir la cantidad de cláusulas que necesitamos utilizar en un elemento en particular. No necesariamente creo que eso sea un gran problema, pero definitivamente tiene sus méritos, y es una característica de SAS que tal vez quieras aprovechar. Solo dejémoslo con la implementación de SAS por ahora. Lo último que este archivo CSS realmente se beneficiaría de nosotros y mixins. Un gran uso de mixins es para crear tus consultas de medios de hierro. Si me desplazo aquí abajo, tengo consultas de medios para múltiples tamaños de pantalla diferentes, y ya las he etiquetado con una variable que vamos a usar en nuestros mixins, así que aquí mismo, esta es la consulta de medios para tamaños de pantalla ancha, y como pueden ver, tengo algunos estilos ahí dentro. Esto es como tamaños de pantalla medianos, medios de
escritorio y tamaños de pantalla ancha. Solo todos los tamaños de pantalla de escritorio, entonces tienes tamaños de pantalla de tablet,
y tamaños de pantalla para móviles. Algunas de estas tienen estilos en ellas, algunas de estas definiciones de bordes que quiero tener que por si acaso necesito usarlas, pero estos son los puntos de ruptura que he configurado. Ahora como puedes ver, siempre
podemos simplemente, si quisiéramos decir,
por ejemplo, tener un estilo diferente para cuerpo de código a través de uno de estos puntos de ruptura, podemos simplemente tirarlo en el que hemos hecho aquí realmente en nuestro tamaños de pantalla de tablet, hemos hecho más pequeño el tamaño de fuente en el cuerpo del código, pero hay una mejor manera de hacerlo con CSS, y eso es lo que quiero mostrarte en este video. Lo que voy a hacer es, mover todos estos puntos de ruptura responsivos hasta la parte superior, y luego los vamos a transformar en SASS, así que voy a crear un comentario aquí, consultas de
medios, y vamos a pegarlos aquí. Esto lo va a romper si solo guardamos eso y lo
atropellamos aquí por ordenar nuestro CSS, esto se va a ordenar incorrectamente, así que vamos a empezar a ver las cosas. A lo mejor no, pero hay una posibilidad de que se descomponga porque cambiamos el orden. Pero lo que vamos a hacer aquí es, no
vamos a dejar estas consultas mediáticas aquí arriba. Nosotros sólo vamos a tener estos aquí arriba como referencia para que podamos escribir nuestros propios mixins que nos genere consultas de medios. Hay varias maneras en que podríamos hacer esto, podríamos crear un mixins para cada tamaño de pantalla de punto de ruptura único, o podemos crear uno y usar una declaración if para determinar a qué anchos de pantalla aplicar, así que me gusta el enfoque if then, así que voy a hacer eso, y lo que eso nos permite hacer es simplemente escribir una consulta de medios de código mixins. He visto esto etiquetado como muchas cosas diferentes en el pasado, puedes llamarlo responde, o tamaño de pantalla, o como quieras llamarlo. Me gusta llamarlo media query porque eso es exactamente lo que es, y para el parámetro, vamos a poner en tamaño. Voy a abrir este mixins, y voy a escribir mi primera declaración if. Como puede ver aquí, ya le he dado nombres a todos estos rangos de ancho de pantalla, así que en realidad podemos usar eso como nuestro atributo aquí, así que voy a crear una sentencia if usando la sintaxis aquí de, si tamaño W es igual al escritorio ancho, no necesitamos volver a usar el signo $, o poner esto entre cotizaciones, entonces queremos que se aplique la consulta de medios de aquí. Yo sólo voy a copiar y pegar eso, y lo que hacemos para que el contenido muestre
aquí dentro es sólo poner en esta etiqueta especial de contenido. Verás cómo funciona esto en tan solo un segundo. Ahora voy a crear una declaración else if, y si el tamaño va a ser de escritorio medio. Entonces, la consulta de medios que usaré es esta. Nuevamente, lo que necesitamos hacer cerrar eso y poner en contenido. El siguiente punto de ruptura que vamos a poner. En realidad podemos deshacernos de esto ahora porque en realidad no tenemos ningún estilo ahí dentro. Hagamos este escritorio medio M-wide. Olvidé poner los iguales aquí arriba. Recuerden chicos, no necesitan nombrarlos exactamente de la misma manera que yo he nombrado a la mía. He definido mis puntos de ruptura, cómo me gustan. No tienes que usar el medio de escritorio M wide en los anchos de pantalla específicos. Así es como lo he configurado. Puedes usar lo que quieras aquí mismo. Contenido, para que uno tampoco tenga ningún estilo en él así que sólo voy a quitar ese. Entonces tenemos escritorio, desplazándonos hacia abajo, copiando esto nuevamente cerrándolo, asegurándonos de que tenemos esa etiqueta de contenido ahí dentro. Esta no tiene ninguna regla de estilo en tampoco, así que solo puedo quitar eso. Entonces tenemos tableta. De lo contrario si el tamaño es igual, igual a tableta. Yo estoy copiando pegando eso. En la etiqueta de contenido, no eliminaré esa porque hay algunos estilos en ella y finalmente tenemos nuestro punto de ruptura móvil o rango de tamaño de pantalla. Voy a escribir otra cosa si el tamaño es
igual a móvil y lanzar nuestra última etiqueta de contenido allí. Ahora, tenemos todos estos anchos de pantalla definidos en esta única consulta de medios. Esto es configurar el mixin. En realidad aún no lo hemos usado. Ahora, que los tengamos configurados, realidad
podemos usar este mixin. Se puede ver cómo esto va a agilizar la forma en que escribimos consultas de medios. Lo que voy a hacer es ver aquí tengo un estilo diferente para el tamaño de fuente del encabezado CTA cuando estamos en ancho de escritorio. Déjame sólo tomar ese tamaño de fuente. Bajemos y busquemos encabezamiento de subrayado de CTA. Aquí vamos. Aquí está el tamaño de fuente predeterminado. Pero por supuesto queremos que muestre cinco píxeles más grandes en una pantalla ancha. Lo que podemos hacer aquí es usar nuestro mixin recién creado. Voy a escribir incluir. Es así como incluyes un mixin. Incluir consulta de medios. Creo que el punto de ruptura era el código de escritorio ancho. Ahí está el primero y lanzemos ese tamaño de fuente alternativo. Guarde eso, no hay errores en nuestra consola. Veamos si eso realmente funcionó. Voy a abrir nuestras herramientas responsive y dar clic en un tamaño de pantalla muy grande. Esta es una pantalla muy amplia de más de 2,000 píxeles. Si hago clic derecho para inspeccionar el encabezado CTA, se
puede ver que ese estilo responsive ahora se está aplicando sobre el valor predeterminado. Activando y apagando eso, se
puede ver que en pantallas más anchas, hemos hecho que ese CTA se dirija un poco más grande. Eso funciona. Ahora, vamos a pasar y refactorizar el resto de nuestro código para usar este mixin de consulta de medios. Podemos quitar éste ahora y para nuestro encabezado de boletín, vamos a cambiar el tamaño de fuente en pantallas anchas de escritorio. ¿ Fue boletín subrayado guiado subrayado? Bajemos aquí y escribamos” incluir media query desktop wide desde otro tamaño de fuente”. Ahora, podemos deshacernos del todo de esta consulta mediática. Bajemos ahora a los tamaños de pantalla de la tableta. Lo que estamos haciendo aquí es en el tamaño de la pantalla de la tableta. Vamos a hacer que el tamaño de la fuente sea más pequeño en el cuerpo de subrayado de la tarjeta. Aquí abajo, corte subrayado cuerpo subrayado, va a lanzar en consulta de medios, crea que era tableta, y ahí tienes. El tamaño de fuente ahora será más pequeño para el cuerpo de la tarjeta en los tamaños de pantalla de la tableta. Podemos volver aquí arriba, quitar éste. Podemos quitar este comentario también. Ahora, acabamos de obtener nuestros tamaños de pantalla para móviles. A flex row, vamos a cambiar la dirección del flex. Flex fila “incluir media query mobile”. Aquí se puede ver esto es mucho más legible. Aquí están los estilos para flex row. Esto es lo que tiene por defecto. Pero en un tamaño de pantalla móvil, queremos que la dirección flex sea columna. Es mucho más bonito, creo que escribir estos una y otra vez. Tenemos cómo se definieron los puntos de ruptura y etiquetas con nombres bonitos. Podemos simplemente tirarlos al CSS en línea y tenemos todo agrupado bastante bien. Espero que estés empezando a ver eso ahora. Acabemos con el resto de estos. Tenemos tarjeta no último hijo. Queremos que el margen inferior sea de 15 píxeles, y necesitamos crear uno nuevo para esto. Tarjeta, ahí vamos, no último hijo, y luego vamos a “incluir la consulta de medios móvil”. la otra forma que podríamos escribir esto es como tal. Podrías escribirlo al revés. Pero en realidad vamos a refactorizar esto usando la anidación en un segundo. Voy a escribirlo así por ahora. Yo voy a quitar eso. Ahora acabamos de tener un último estilo. Site dash header underscore guión bajo título. Yo creo que tampoco tenemos esa configuración. Vamos a ir a sitio y luego incluir media query mobile y darle ese relleno. Ahora, podemos eliminar todas nuestras consultas de medios porque ahora todo
lo maneja nuestro mixin aquí arriba. Vamos a ahorrar comprobar cómo consola Sass aquí abajo. Se ve bien. Refresca nuestra página y ahora deberíamos ver que todo funciona exactamente igual. Pero es mucho más agradable leer en términos de cómo hemos escrito nuestro código. Es mucho más fácil de manejar también. Aquí vamos. Todo en cuanto a nuestra capacidad de respuesta sigue funcionando. Aquí hemos aprovechado plenamente el poder de este mixin. Ahora, la última característica que quiero mostrarles en esta lección es anidar. Obviamente vimos anidar en la primera lección donde, lo
probamos en SassMeister, pero aquí en un proyecto real, ¿dónde podemos realmente encontrar oportunidades para anidar? Bueno, en mi proyecto particular, lo que he hecho es usar un código de convención de nomenclatura CSS BEM. BEM significa modificador de elemento de bloque. Eso es lo que son estos raros subrayados dobles por si te estabas preguntando. Si utilizas BEM, solo
busquemos a BEM ahora. Se puede ir a su página web y aprender cómo funciona. Soy un gran fan de BEM. Creo que es genial. Pero una de las características de BEM es que tiene el anidamiento incorporado. En este proyecto en particular, realmente no
necesito anidar porque como puedes ver, el subrayado es hacer la anidación por nosotros. Es solo que todo forma parte de la convención de nomenclatura. Pero lo que haré en un segundo es eliminar esas clases de BEM y podemos ver cómo podemos usar el anidamiento en este proyecto. En el caso de que en realidad no quisieras usar esta convención de nomenclatura de clases BEM. Este sitio web es getbem.com Si quieres conocer más sobre BEM, algo que he usado durante el último año y me gusta mucho, pero no todo el mundo es fan de BEM. Definitivamente haz tu investigación en ese. Algo que podemos hacer a pesar de usar BEM en este proyecto es usar ampersands. Aquí hay algunos lugares en nuestro código donde usar un ampersand tiene mucho sentido. Déjame pasar y ver dónde nos estamos repitiendo. Aquí, podemos ver un ejemplo clásico de donde un ampersand tiene sentido. Tenemos nuestra extensión aquí, signo
porcentual, BTN definido dos veces. Lo que podemos hacer en su lugar es que podemos copiar todo después de ese segundo BTN, y luego podemos ir dentro de la regla BTN y usar un ampersand. Ahora obtendremos exactamente el mismo resultado. Es solo más agradable y más limpio. Vamos a pasar otra vez, ver dónde más podemos usarlo. Si quisiéramos, en realidad, podríamos entrar aquí y anidar así. Esto no agrega demasiado, pero es una opción, así que si guardo eso, refresca la página por aquí, obtenemos el mismo resultado, entonces lo que hemos hecho es que ya estábamos usando el punto CTA aquí arriba, entonces lo que podemos hacer es simplemente mover esto
al conjunto de reglas de CTA y hacer referencia al nombre de los padres, mediante el uso de ese ampersand. A algunas personas les gusta así, algunas no les gusta realmente
así, así que voy a volver a ponerlo de la manera en que fue en realidad porque creo que es un poco más manejable así, que la opción está ahí para usar ampersands cuando estás nombrando tus clases en BEM también, hay otro ejemplo que vi antes de lo que quiero arreglar aquí es este. Entonces donde poner un pseudo-selector en esta tarjeta, así que realmente no necesitamos otra definición aquí, entonces lo que voy a hacer es usar un ampersand y anidarlo dentro de ese componente de tarjeta ahí. Por guardar, actualiza la página medida que esto vaya en ese tamaño de pantalla móvil para asegurarse de que esté funcionando. Lo sentimos, iPhone X, y si inspeccionamos una tarjeta que no es el último hijo, que es o éste o éste, se
puede ver que aún tenemos ese estilo viniendo a través del ampersand, pero obviamente no aplica al último tarjeta. Entonces como mencioné antes, este proyecto utiliza BEM, lo que la anidación nos es atendida por esta convención con los dobles subrayados, pero digamos por ejemplo, eliminamos todos los elementos dentro de nuestros bloques. El concepto cool en BEM es que tienes tu bloque justo aquí, y luego dentro de tu bloque tienes elementos. El modo de nombrar a tus elementos es prefijándolos con el nombre del bloque, seguido de subrayado. Pero digamos que no nos gusta BEM y sólo vamos a quitar estos por completo. Entonces me voy a deshacer de todos estos selectores de nivel de elemento, no más cuerpo de tarjeta, no más título de tarjeta, podría adelantar rápidamente a través de esto porque aquí hay bastantes instancias, básicamente
estamos quitando todo lo que está usando ese doble subrayado convención de nomenclatura. He eliminado todos los selectores de nivel de elemento aparte de éste, y aparte de éste de aquí, porque este es un div dentro de un div, así que solo voy a dejar ese aquí, también
podrías nombrarlo así también. Entonces vamos a guardar y refrescar nuestra página y deberíamos ver que nuestro diseño ahora está roto. Entonces el diseño en realidad está bien, pero muchos de nuestros estilos están rotos. Ahora, lo que podemos hacer es usar la anidación en lugar de BEM. Entonces aquí mismo para rumbo CTA, el rumbo que teníamos es sólo un h2. Entonces en lugar de tener rumbo CTA, lo que puedo hacer es tomar todo esto y simplemente apuntar al elemento h2 dentro de nuestro CTA. Lo mismo con el botón, nuestro botón es simplemente una, una etiqueta. Entonces puedo entrar aquí, copiar todo esto, y anidar nuestras reglas para la etiqueta a, ahí dentro. Ahora nuestra sección de CTA debería estar de vuelta a lo que era antes, sí ahora hagamos lo mismo con el boletín de sección, así que tenemos nuestro encabezado de newsletter justo aquí, que es un h2, igual que hicimos con el CTA sección, así que me voy a llevar todos estos estilos justo aquí y luego anidarlo aquí. Por lo que cualquier h2 dentro de un div de newsletter o un elemento de newsletter ahora tendrá los estilos. Lo mismo va para el formulario de boletín, lo que podemos simplemente apuntar al elemento de forma real aquí por su nombre de elemento en lugar de una cláusula en particular, así que forma, y luego lo mismo con entrada y botón, para que podamos hacer entrada, botón creo que fue un elemento de botón, así que solo podemos usar un selector de elementos aquí, mover todo eso, y vamos a ver si nuestro boletín se ve bien, sí, se ve exactamente como estaba antes, así que solo voy a avanza rápido ahora y haz la consistencia del resto. Este último ejemplo de componente de tarjeta aquí es un ejemplo perfecto de por qué me gusta usar BEM. Aquí se puede ver que para nuestros otros, era fácil apuntar a elementos, específicamente dentro de nuestro boletín div y nuestro div CTA, ya que todos eran nombres de elementos diferentes. Tenemos h2, tenemos etiqueta de párrafo, y tenemos una etiqueta. Aquí en nuestro boletín, tenemos un formulario, tenemos una etiqueta de entrada, y tenemos una etiqueta de botón. El caso en nuestras tarjetas es que estamos usando divs dentro de nuestro div. En realidad, las cláusulas ayudaron a diferenciarlas. En cambio, usando este enfoque de no escribir una clase extra y usar Sass, estoy escribiendo algo que es un poco más sucio, que está apuntando a los divs por su posición dentro de ese elemento de tarjeta. Como puedes ver aquí, cuando lo estás leyendo, no tiene tanto sentido como la clase BEM antes, aquí
hay otras opciones, no
necesitamos eliminar todas las clases porque las clases son útiles, pero un mejor ejemplo está justo aquí arriba donde digamos por ejemplo, no
queríamos escribir un nombre de clase para algunos de estos elementos, y no podemos apuntarlos solo por el nombre del elemento, siempre
podríamos hacer esto con Sass. Ese es un ejemplo aquí mismo de usar esa función de anidación. Tenemos nuestro documento exactamente igual que antes, pero lo hemos refactorizado para usar a Sass. Esperemos que estés empezando a ver ahora cómo estamos usando algunas de las características de Sass' is para escribir CSS de una manera más fácil y más sucinta. Quizás en un proyecto pequeño como este, los beneficios son particularmente claros, pero cuando se tiene un archivo CSS de muchos miles de líneas, entonces esta estructura y tener características como mixins y variables se vuelven muy importantes. Hay una característica más que quiero mostrarles en Sass sin embargo, y eso son parciales. Por lo que en realidad podemos dividir partes de nuestro archivo SCSS aquí en diferentes archivos y traerlos cuando sea necesario. Pero para eso, voy a esperar el siguiente video en el que vamos a ver modularizar nuestro archivo SCSS. Te veré en el siguiente video.
6. Cómo escribir Sass modular: En esta lección, vamos a hablar de modularizar nuestro documento [inaudible] en diferente, lo que se llama parciales en SASS. Esto es parte de un tema más grande en torno a la arquitectura CSS, que en nuestro caso aquí, ejecutar un archivo SCSS, tenemos menos de 200 líneas, no es un gran negocio, pero se convierte en una gran cosa en cuanto a cómo estructuras tus proyectos SASS cuando empiezas a tener hojas de
estilo que tienen miles y miles de líneas de largo. Por lo que podríamos haber fácilmente simplemente cubierto esto en la lección anterior como una característica extra y forma de refactorizar CSS, pero quería darle una lección dedicada aquí porque, es un tema que debe considerarse en sí mismo. Entonces lo que voy a hacer es, primero
vamos a modularizar nuestro documento y luego vamos a ver cómo podríamos hacerlo para un proyecto más grande. Está bien. Entonces cómo hacemos un parcial en SASS, es crear un nuevo archivo y nos aseguramos de que ese archivo comience con un guión bajo. Por lo que un parcial común para empezar es sacar variables en su parcial de hierro. Entonces voy a tener un parcial con el nombre de variables.scss. Entonces lo que voy a hacer, tomar todos nuestros colores, moverlos aquí. Ahora si volvemos a nuestro documento aquí, verás que nada ha cambiado. Pero si bajamos aquí, verás que en realidad no ha compilado el nuevo documento CSS porque le faltan todas estas variables de color. Entonces tenemos que importar realmente este parcial a este documento, y la forma en que hacemos eso, es poniendo aquí una declaración de importación, y todo lo que necesitamos hacer es abrir algunas comillas, variables de entrada en. En realidad no tenemos que poner el guión bajo o el punto SCSS al final. Si me desplaza hacia abajo, verás que todos estamos bien. Refresca la página. Todos estamos bien. Entonces en este momento tenemos exactamente la misma salida. Simplemente estamos modularizando nuestro SCSS para que esté organizado en diferentes compartimentos. El siguiente es el mixins. Entonces voy a crear una cotización parcial underscore mixins.scss. Entonces hagamos lo mismo con nuestro mixin de consulta de medios. Entonces voy a escribir, importar mixins, guardar eso, y luego traer esto aquí. Mira hacia abajo la consola L SASS, no se detectaron problemas, y si refrescamos la página y empezamos a movernos por nuestros puntos de ruptura sensibles, puedo ver un problema, y ese es de la lección anterior donde olvidamos apuntar a este H1. Entonces sólo corregiré eso ahora mismo. Todavía tenemos título de encabezado lateral aquí. Entonces en lugar de eso porque ya no estamos usando BM, sólo
vamos a apuntar al elemento, y obviamente vamos a aprovechar eso ahí dentro. Ahorrando eso, ahora verá eso. Tenemos los mismos resultados exactos, pero ahora tenemos unos mixins y variables compartimentados en sus propios pequeños archivos SCSS. También podemos llevar esto un poco más allá y poner nuestros estilos base en un parcial también. Entonces nuestros estilos base, cosas que afectan todo el documento CSS y forman la base de nuestros estilos. Por lo que en este caso sería L Asterix, y L cuerpo. Entonces voy a tirar eso aquí e importar base. Otro parcial podríamos hacer nuestros elementos de diseño L, por lo que, tenemos fila flex, ancho de
página, y centro de texto. Un centro de texto en realidad es más una utilidad, creo que un diseño. Entonces, solo tomemos estos dos y creemos un parcial para ellos. El orden en el que haces esto realmente no importa. Entonces voy a llamar a este layout, y luego voy a crearlo, subrayado layout.scss. Todo esto depende de ti cómo quieres hacer esto por cierto. Estoy siguiendo convención en este momento, y veremos en el siguiente video en realidad cómo lo hace Bootstrap, un popular framework CSS, pero en este momento estoy poniendo mi página con MI flex drier en el layout parcial justo aquí. Entonces como puedes ver, refrescando la página, tenemos el mismo resultado. También podemos poner componentes L en su propio parcial. Entonces voy a tomar todo esto y poner eso en un parcial por el nombre de los componentes. Vamos a crear un nuevo archivo para ese, CSS. Honestamente podríamos ir todo el camino hasta que todos estos estén en sus propios parciales, pero no necesitamos volvernos demasiado locos. Creo que en realidad deberíamos tener botón, es un componente particular, entonces, deberíamos poner eso aquí también. Entonces conseguimos el componente de tarjeta y el componente de botón. Refresca la página en este. Todo parece estar funcionando y no tenemos errores de SASS. Está bien. Ahora lo que hemos hecho, es que hemos roto nuestro archivo styles.scss en múltiples archivos, y simplemente lo hace más fácil. Si estamos buscando un componente, podemos entrar en componentes, si estamos buscando estilos base, podemos entrar ahí, buscando mixins aquí,
variables aquí, etc., etcétera. Ahora, como mencioné con un pequeño proyecto como este, esto no es tan importante. Definitivamente pondría sus variables y mixins en su propio parcial, pero para descomponer las cosas en componentes, en diseño y base, en tan esencial como podría ser en un proyecto muy grande. Entonces como mencioné, hay unas cuantas convenciones que seguir o no seguir. Si lo haces terminando expandiéndote en tu hoja de estilo o trabajando en un proyecto grande y grande. Una de estas convenciones se llama la arquitectura 7-1. Si solo busco eso en Google, puedes ver aquí hay una página en GitHub sobre SASS 7-1, también
hay muchos artículos sobre el tema, pero puedes ver aquí un ejemplo de la patente 7 -1. Entonces como viste en nuestro documento aquí, acabamos de hacer una parcial para base, hicimos una parcial para componentes, una parcial para maquetación. Pero si tuvieras un proyecto aún más grande, esos componentes, diseños y base, eso podría ser una carpeta real, y entonces podrías tener parciales dentro de ella. Entonces, por ejemplo, podría transformar parcial de
mi componente en diferentes componentes dentro del directorio de un componente. Entonces podría entrar aquí,
y en lugar de tener esto llamado componentes, podría llamarlo tarjeta, y podría colocar eso dentro del directorio de componentes. Sí, estoy seguro de que quiero moverme, y entonces por supuesto también tenemos un botón aquí, entonces, no
queremos eso, entonces, saca eso de aquí, crea un nuevo parcial dentro de nuestro directorio de componentes para botón como tal, y entonces podemos o bien incluir ambos, como tal, o si quisiéramos, podríamos crear otro archivo SCSS dentro aquí e importar nuestros diversos componentes en ese único archivo, luego importar ese archivo al principal hoja de estilo. De nuevo, eso sería exagerado para este tipo de proyectos, pero cuando estás trabajando en aplicaciones de mayor escala, definitivamente
vas a necesitar entender cómo estructurar mejor tu CSS. No es raro cuando estás trabajando en una gran app para ver fotos y fotos de varios componentes diferentes. En realidad veremos en la siguiente lección usando Bootstrap, cuántos archivos SCSS diferentes hay en ese marco. Por lo que verás un ejemplo en vivo en el siguiente video. Entonces ahora mismo eso es todo lo que quiero hacer con modularizar nuestro proyecto aquí. Como se mencionó, son proyectos bastante pequeños, así que, no necesitamos hacer mucho de esto, pero es otra característica genial de SASS y se vuelve muy importante como se menciona al escribir aplicaciones grandes. Entonces en el siguiente video, vamos a mirar a Bootstrap. Bootstrap es un framework CSS que utiliza SASS, y en realidad podemos ver cómo se estructura un marco SASS adecuado. Reunirá algunos de los conceptos que hemos aprendido en esta clase. También vamos a aprender cómo podemos usar realmente Bootstrap, y voy a nuevos conocimientos de SASS para realmente modificar Bootstrap y hacer lo que se llama temización personalizada. Entonces estoy emocionado por esa lección. Te veré en el siguiente video.
7. Extra: cómo usar Sass con Bootstrap: En esta lección, vamos a extender lo que acabamos de aprender para trabajar con un marco CSS muy popular como Bootstrap. Antes de esto, es posible que hayas trabajado con Bootstrap en el pasado, pero es posible que hayas usado esta versión de CSS. Bueno, ahora que conocemos a Sass, en realidad
podemos usar la versión Sass de Bootstrap y en realidad podemos sacar mucho más de ella. Si no estás familiarizado con Bootstrap, puedes venir aquí a la página web en getbootstrap.com. Puedes pensar en ello como un conjunto de estilos
predefinidos que puedes cargar rápidamente en tu documento. También tiene JavaScript, pero ese no es el foco de la clase actual. Aquí puedes ver algunos ejemplos de sitios web de Bootstrap. Probablemente se vea mucho parecido a algunos de los sitios web que ya has visto en la web. Si nos fijamos en este ejemplo, se pueden
ver muchos elementos de Bootstrap. Básicamente, todo lo que se requiere para conseguir ese look es usar las clases adecuadas. Si entro en la documentación y luego en los componentes, literalmente
puedes copiar y pegar parte del código aquí. Siempre y cuando hayas incluido la hoja de estilo para Bootstrap, obtendrás exactamente el mismo look que este. Lo que he hecho para esta lección es que en realidad he refactorizado el pequeño proyecto en el que estábamos trabajando en lecciones anteriores para usar elementos Bootstrap. Como siempre, todo lo que necesitas hacer para acceder a este proyecto, es ir a github.com/christopherdodd/skillshare. Como puedes ver aquí, he incluido este ejemplo proyecto Bootstrap para que lo utilicemos en esta lección. Voy a guardar eso en mi carpeta de códigos. Voy a subir aquí mismo y solo puedo dar click para ampliarlo. Simplemente voy a cambiar el tamaño de algunas ventanas aquí para que te sea más fácil ver. Ahora, tenemos nuestro ejemplo de proyecto Bootstrap ahí. Lo que voy a hacer es abrir de nuevo el código VS. Abramos esa carpeta. Ejemplo, proyecto Bootstrap. Deshaznos de esa pantalla de bienvenida y echemos un vistazo a nuestro proyecto. Lo primero es lo primero, vamos realmente a vivir con esto para que podamos verlo en nuestro navegador. Como puedes ver aquí, es un diseño similar a nuestro proyecto antes, pero lo que he hecho es que acabo de cambiarlo para usar Bootstrap. Tenemos los elementos Bootstrap ahí dentro, pero es más o menos el mismo diseño exacto que antes. Podemos cerrar esto una vez que hayamos conseguido configurar con éxito nuestro proyecto. Echemos un vistazo al código. En nuestro archivo de índice, como dije, código
similar, pero estamos usando todas las clases de Bootstrap aquí. Hay algunas personalizadas que he incluido en mi propia hoja de estilo aquí mismo. Estas son modificaciones en la parte superior de Bootstrap. Aquí tenemos Bootstrap y tenemos la versión compilada de este archivo SCSS y en un index.html. Se puede ver que estamos incluyendo a Bootstrap primero y luego estamos incluyendo nuestros estilos. Yo igual que siempre podemos correr “Ver Sass”. Podríamos hacer más cambios aquí.. Entonces una vez que guardemos, se recompilará a esta hoja de estilo aquí mismo. Aquí mismo tenemos a Bootstrap funcionando. En realidad podemos anular Bootstrap reescribiendo aquí las definiciones de clase. Como puedes ver aquí, he cambiado de fila para no tener margen porque me estaba dando problemas. Si solo cambio al archivo SCSS y lo comento,
verás que si abro mis herramientas de desarrollador y bajo a un tamaño de pantalla más pequeño, los márgenes negativos en las filas me estaban dando un momento difícil. En realidad entró y anuló esos estilos. Como puedes ver aquí, se ve mucho más bonito sin esos márgenes negativos. No me malinterpreten. Esta es una forma perfectamente bien de hacerlo con solo CSS. Ni siquiera necesitamos SCSS en esta instancia porque en realidad
no estoy escribiendo nada más que CSS simple viejo aquí. Como se puede ver, este es el más o menos el mismo archivo exacto. De hecho, creo que es exactamente el mismo código. En realidad no necesitamos SCSS en esta instancia. Pero lo que podemos hacer con el número 1, ver cómo se
estructura un framework Sass a gran escala y al mismo tiempo aprovechar algunas de las características de Sass, en realidad
podemos incluir el código Sass de Bootstrap. Hagámoslo ahora mismo. Voy a volver a la página web de Bootstrap. Vamos a ir a “Inicio” y luego haga clic en “Descargar”. Aquí mismo puedes ver que solo estaba usando el CSS compilado. Pero lo que puedo hacer en su lugar es descargar el código fuente. Voy a dar clic en “Descargar Fuente”. Voy a poner eso justo en mi escritorio. Voy a expandirme a eso. Ahora, puedo ir a mi escritorio y abrir “Bootstrap 4.4.1”. El número probablemente va a ser diferente dependiendo de cuándo estés viendo este curso. Pero en el momento actual, esa es la última versión de Bootstrap. Se puede ver aquí hay un montón de código diferente. Dentro de esta carpeta dist, por ejemplo, tenemos el CSS compilado y también el JavaScript compilado. Pero lo que buscamos es el SCSS aquí mismo en esta carpeta SCSS. Como puedes ver aquí, tenemos una gama de diferentes parciales. Entonces tenemos estos tres que nos dan el “Bootstrap-Grid”, el “Bootstrap-Reboot”, y el “Co-op Bootstrap”. También tenemos carpetas para mix-ins, utilidades, y proveedor. Lo que quiero hacer es abrir nuestro ejemplo proyecto Bootstrap por aquí. Vamos a crear una estructura de carpetas para sostener este código Bootstrap. Voy a crear una carpeta de proveedor. Dentro de esta carpeta de proveedor, voy a crear una carpeta llamada Bootstrap. Entonces dentro de Bootstrap, voy a llamar a este SCSS. Entonces, finalmente, ahora, es el momento de traer todos los archivos dentro de esa carpeta SCSS a nuestros propios proyectos. Ahí vas. Si vuelvo ahora a mi editor de códigos, puedes ver que tenemos la carpeta de proveedores y dentro tenemos vendedor, Bootstrap, SCSS. Tenemos todos los archivos del SCSS aquí. Ahora bien, esta es una estructura importante para mirar y estudiar si quieres saber más sobre la estructuración de aplicaciones a gran escala. Tenemos todos los diferentes mix-ins en diferentes parciales aquí mismo. Es altamente [inaudible] y lo estamos incluyendo todo en este archivo final de Bootstrap SCSS, que básicamente es solo un montón de entradas. Te animo a echar un vistazo y a notar lo que está pasando aquí. Pero después de que hayas hecho eso, en realidad
podemos ir a editar este archivo Bootstrap para eliminar algunas de las cosas que no necesitamos y también editar algunas de las cosas que queremos cambiar. El beneficio de hacerlo de esta manera es que podemos reducir la cantidad de líneas que termina en nuestro archivo bootstrap.css final. También podemos cambiar variables antes de que se usen en el CSS. En realidad es un sistema bastante bueno y algo para
aprovechar definitivamente si sabes hacerlo y buscas eficiencias extra. Antes de realmente hacer cambios a este archivo, sin embargo, vamos a tener que reconfigurar cómo funciona nuestro compilador Sass en vivo. Recuerda antes acabamos de tener una carpeta y así el archivo de salida
simplemente iría justo al lado de nuestro archivo SCSS en esa carpeta de salida. Bueno, ahora es un poco diferente porque tenemos una carpeta solo para SCSS. También tenemos nuestro SCSS específico de Bootstrap almacenado en esta carpeta. En realidad vamos a necesitar hacer un poco de configuración para asegurarnos de que todos nuestros CSS, no importa dónde se encuentren los archivos SCSS en nuestro proyecto, quien termina en este directorio aquí mismo. Para ello, necesitamos entrar en la configuración de usuario de nuestra aplicación VS Code. Voy a entrar en configuración de código de preferencias. Entonces voy a buscar un compilador Sass en vivo. Ahí vamos. Ahora, queremos bajar a aquí y queremos editar nuestros formatos. También queremos cambiar si genera el archivo de mapa. Podemos editar, como dice aquí en settings.json. Voy a hacer clic en eso. Como puedes ver aquí, ya
tengo mi código configurado. Este primer pequeño bloque aquí es para configurar nuestros formatos, y le he dado el SavePath de. /css. Eso va a tomar nuestros archivos CSS y asegurarnos de que vayan en esta carpeta aquí. Lo que también he hecho se hace una lista excluida. Voy a excluir la rejilla de Bootstrap y el reinicio de Bootstrap. Si solo elimino esto, en realidad vamos a eliminar esto que genera el archivo de mapa también. Guardemos eso. Si golpeo “Watch Sass”, ya verás obtenemos Bootstrap-Grid, Bootstrap-grid.css.map, bootstrap-reboot, bootstrap-reboot.css.map, bootstrap.css.map, style.css.map. Realmente no necesitamos tantos archivos CSS, así que todavía va a funcionar con solo esto aquí. Pero lo que me gusta hacer es excluir esos archivos y tampoco generar el mapa. Lo que podemos hacer aquí es que podemos eliminar todo nuestro CSS aquí porque estamos usando SCSS completamente en este proyecto. Voy a mover todo eso a la basura. Va a salvar esto. Entonces, solo activemos de nuevo a nuestro compilador Sass. Piensa que puede que tengamos que reiniciar. Apague eso y haga clic en “Ver Sass”. Ahora puedes ver que solo está generando el único archivo bootstrap.css, igual que teníamos antes. Entonces si volvemos a nuestra página web, todo funciona normalmente. Lo primero que podemos hacer para reducir la cantidad de líneas en un archivo bootstrap.css. Si nos desplazamos hacia abajo hasta el final, podemos ver que esto es más de 10,000 líneas de CSS bootstrap. La mayoría de las veces, en realidad no necesitamos todo lo que bootstrap tiene para ofrecer. Uno de los beneficios de usar la versión SCSS de bootstrap es que podemos empezar a eliminar algunas de estas importaciones. Lo que podemos hacer es un proceso de eliminación para eliminar cosas y ver si rompe nuestra página web. Pero lo que me gustaría hacer en su lugar es el reverso de eso. Un proceso inverso de eliminación donde reintroducimos algunas de estas importaciones. Lo que voy a hacer es comentar todos estos fuera para que ninguno de ellos se ejecute y si refresco la página por aquí, se
puede ver que hemos perdido todos nuestros estilos. Empecemos a reintroducir algunas de estas partes de bootstrap hasta que tengamos el look que buscamos. Definitivamente vamos a necesitar funciones, variables, y mixins. Estos son obligatorios en bootstrap y estos probablemente no van a hacer ninguna diferencia en nuestra página web. Pero solo proporcionan las funciones, las variables, y mixins que se utilizan a lo largo del resto de estos parciales aquí mismo. Vamos a querer incluir ruta. Vamos a querer incluir formularios de cuadrícula. Definitivamente usamos botones que hemos usado, ¿qué más hemos usado? Nav y navbar. Hagamos sólo navbar por ahora, hemos usado tarjetas. Si quieres comprobar lo que hemos utilizado en cualquier momento, solo
puedes entrar en index.html y puedes ver algunos de los elementos que estaban usando, como las tarjetas de navegación aquí mismo. Está todo ahí en el html. Voy a volver aquí. No estamos usando paginación. Estamos usando el jumbotron. ¿ Qué más estamos usando? Las utilidades probablemente van a ser algo que necesitamos. Como se puede ver, todavía tenemos mucho comentado. Voy a guardar eso. Vuelve a aquí y puedes ver que ya estamos un poco más cerca. Tenemos muchos de esos elementos, pero todavía nos falta algunas cosas importantes. Voy a incluir reboot y type, que tiene fuera estilos de tipografía y vamos a refrescar la página. Ahora puedes ver con reboot y type que
en realidad tenemos prácticamente todos los estilos que necesitamos. No creo que falte nada necesariamente aquí. Funciona en móvil. Vamos a entrar y echar un vistazo a nuestro archivo bootstrap.css final aquí. puede ver aquí es poco más de siete mil líneas de código. Lo hemos reducido en 3 mil líneas de código, lo cual es bastante bueno. Significa que el tamaño del archivo va a ser más pequeño. Simplemente es más eficiente en general usar solo lo que necesitas. Con un marco como Bootstrap que está tan completo y tiene tanto en él, existe la posibilidad de que realmente pudiéramos aumentar el tamaño de nuestro proyecto sin necesidad de hacerlo. Este es uno de los beneficios que nos brinda el uso de la versión SCSS de Bootstrap. El otro beneficio, por supuesto, es la tematización de Bootstrap. A lo que me refiero con eso es si entramos en decir, las variables en nuestro archivo de variables de subrayado, y tengo que desplazarme hasta abajo. Aquí vamos. Se puede ver que todos nuestros colores están definidos con un modificador por defecto de signo de exclamación al final. Lo que esto hace es que sólo crea una variable con este color azul si no existe ya una variable por el nombre de azul. Lo que esto significa es que podemos modificarlos fácilmente, anularlos definiendo las variables nosotros mismos. Estos son solo los valores predeterminados, pero en realidad podemos entrar y cambiar el color azul a lo largo de la totalidad del bootstrap simplemente entrando aquí y cambiando el color azul. Echemos un vistazo a la sección
del sitio web de bootstrap que habla de la tematización de bootstrap. Si busco aquí tematización, podemos ver theming bootstrap. Como dice aquí, personalizó Bootstrap 4 con nuestras nuevas variables Sass incorporadas para preferencias de estilo global, para facilitar la tematización y los cambios de componentes. Como puedes ver aquí, te está mostrando lo que necesitas para importar como mínimo desnudo. Éstas son requeridas. Recuerda aquí arriba, funciones, variables y mixins. Vamos a crear en realidad un espacio entre ellos para que puedas ver que estos son requeridos. También va a etiquetarlos así requerido y luego reiniciar,
escribir, imágenes, código, cuadrícula. Estos son todos opcionales. Necesitamos root, reboot, y type, pero aún no necesitamos imágenes. Porque no tenemos ninguna imagen en nuestro proyecto en particular. Pero esos también son opcionales y como dice aquí con esa configuración en su lugar, se
puede comenzar a modificar cualquiera de las variables y mapas de
columnas de Sass dentro de un archivo.scss personalizado. Pero creo que es bastante fácil y lo suficientemente seguro solo para crear nuestras personalizaciones aquí. Siempre podríamos crear nuestro propio custom.scss y luego importar este archivo a eso. Pero con un archivo tan pequeño ya, no
creo que nos vaya a hacer daño modificar este archivo bootstrap. Entremos y en realidad empecemos a tema este archivo bootstrap y cambiemos algo que existe en nuestros archivos bootstrap. Aquí hay muchas opciones diferentes y diferentes ejemplos que puedes encontrar en esta página sobre cómo empezar a recortar temas. Tantas opciones diferentes. Pero algo que es realmente simple de hacer es cambiar un color. Echemos un vistazo a qué colores estamos usando aquí. Estamos usando este botón primario aquí mismo. Vamos a sumergirnos en el index.html aquí mismo, como se puede ver aquí, estamos usando la clase primaria de botón. Eso probablemente va a estar en el componente para botones. Desplazándose hacia abajo y arriba aquí, podemos encontrar botones aquí y tenemos nuestros estilos de base de botones. Podemos desplazarnos hacia abajo hasta encontrar el botón primario o puedes buscarlo. Nada para botón primario. ¿ Y si buscamos primaria? No hay nada ahí tampoco. Creo que la razón es porque estamos usando mapas y para bucles. Entonces lo que buscamos es el color primario. Es bastante seguro suponer que eso es lo que se utiliza dentro de botón primario. Déjame volver a las variables y busquemos primaria. Como puedes ver aquí, el color para primaria va
a ser este color azul y si miramos la definición de este azul, se establece en un valor predeterminado de este color aquí mismo. Que por supuesto coincide con este color aquí mismo. Lo que podemos hacer es entrar y cambiar ese color primario. A lo mejor lo cambiamos a un amarillo en su lugar. Si guardo eso, vuelve aquí, ahora
verás que el color primario a lo largo de todo nuestro proyecto ahora se cambia a amarillo. Pero claro que no queremos cambiarlo aquí mismo. En realidad solo queremos anularlo en nuestro archivo bootstrap final. Podemos hacer eso desde cualquier parte de aquí. Llama a esto variables, y voy a anular el color de primaria llamándolo amarillo y mismo resultado. Se desea mantener limpio el archivo de variables, mantener ahí todos estos valores predeterminados y cualquiera de nuestras modificaciones que queremos poner en el único archivo. De nuevo, podemos ponerlo aquí mismo en nuestro archivo bootstrap.scss. O podemos crear un archivo.scss personalizado.scss y luego importar este archivo en él. Ese es un ejemplo. No estoy seguro de qué otras cosas podrías querer hacer. Las posibilidades realmente son infinitas, depende de ti lo que quieras cambiar. Podríamos cambiar cualquiera de estas variables y se propagaría a todas partes que esa variable se utiliza en nuestro proyecto a lo largo de bootstrap, y entonces eso se aplicaría a nuestra propia hoja de estilos. Característica muy potente dentro de bootstrap. Siempre puedes hacer la implementación de CSS y puedes anular cosas como esta. Pero si quieres llegar a la fuente de cómo se genera bootstrap, puedes venir aquí, reducir el número de cosas que estás importando, y en realidad modificar variables desde dentro de este archivo. Muy cool. Eso concluye esta lección sobre bootstrap y el uso de la forma scss de bootstrap. Espero que te estés sintiendo un poco más confiado con scss ahora. Obviamente, a medida que codificas más de ella y
te acostumbras, vas a empezar a sentirte más cómodo con ella. Eventualmente, estoy seguro de que no vas a querer volver a codificar la antigua manera con CSS. A veces si solo necesitas hacer un pequeño cambio, CSS está bien. Pero como verás, cuando te metas en proyectos más grandes y más grandes, vas a necesitar usar algo como SASS. De lo contrario, sólo se va a poner demasiado desordenado. Espero que hayas disfrutado de esta lección y del siguiente video vamos a terminar y hablar de tu proyecto de clase. Te veré en el próximo.
8. Conclusión y proyecto de clase: En esta clase, hemos cubierto una buena visión general de las capacidades de los SASs y cómo usar este lenguaje puede transformar totalmente la forma en que escribes CSS. Si bien hay un montón de otras características dentro de SASs, lo que hemos cubierto en esta clase es suficiente para que aproveches el poder de este impresionante lenguaje. Debo admitir que me tomó mucho tiempo empezar a adoptar SASs en mi propio flujo de trabajo. Pero con herramientas como el compilador de sAsS en vivo, no toma demasiado tiempo configurar tu proyecto para aprovechar todos los beneficios de SAsS. Lo que quiero que hagas por tu proyecto de clase es migrar algún código existente de CSS a SCSS, igual que hemos hecho en esta clase. Idealmente, este sería un proyecto web en el que ya estás trabajando, pero si no tienes tu propio proyecto, siéntete libre de usar los proyectos en los que trabajamos en esta clase. Todo el código, como siempre, estará en mi repositorio de Skillshare en Github.com/Christopherdodd/SkillShare. Por último, si necesitas algún consejo o orientación sobre lo que hemos cubierto en la clase de hoy, asegúrate de dejar un comentario en el recuadro de discusión de abajo, y haré todo lo posible para señalarte en la dirección correcta. Gracias, como siempre, por ver y espero volver a verte en algunas de mis otras clases.
Christopher Dodd, Web Developer / Educator
