Paso a paso Sass

1. Introducción: Hola, soy Lisa Catalano y esto es paso a paso SAS. Creé este curso para personas que conocen CSS pero no han tratado de CSS pre procesador aún. Sé lo abrumador que puede ser trabajar en la Web. Casi todos los días se oye hablar de alguna nueva habilidad que debes aprender a estar al día. Cada vez que sientes que te estás poniendo bien en una cosa, te das la vuelta y la mejor manera de hacer algo es completamente diferente. Seré honesto y te haré saber que realmente no quería aprender SAS. Estaba muy ocupado en mi trabajo, creando un sitio web completamente nuevo usando backend y front y tecnologías que eran algo nuevas para mí. Tenía gran parte del CSS ya descubrí cuando me dijeron que tenía que usar SAS. Me encanta aprender cosas nuevas, pero no pensé que tuviera tiempo suficiente para aprender SAS sin que me ralentizaran. Me alegra decir ahora que me equivoqué completamente. Aprender sass fue realmente fácil, y en realidad crecí hasta amarlo dentro de ese primer día. No puedo decir eso de muchas de las tecnologías web que he probado toe learn. En los últimos cinco años, SAS fue realmente fácil de recoger, y el pago fue grande. Por lo que he decidido hacer esta clase para animar a aquellos de ustedes que sienten que no tienen tiempo suficiente para otra tecnología o habilidad ahora mismo para pasar sólo un poco de tiempo conmigo dedo del pie aprender esta valiosa habilidad. Entonces lo que es SAS SAS destaca fuerza y hojas de estilo tácticamente impresionantes, según su sitio web, Sass es un lenguaje metálico encima de CSS que se utiliza para describir el estilo de un documento limpia y estructuralmente, con más potencia que plana, CSS permite que SAS tanto proporciona un texto más simple, más elegancia para CSS e implementa diversas características que son útiles para crear hojas de estilo manejables. En otras palabras, es un pre procesador para CSS. Escribes tu CSS en el formato SAS, y lo que escribes se compila o genera en el formato CSS estándar. Te permite escribir tu código de una manera más organizada y sencilla. Traduce lo que tienes derecho en el CSS estándar. Son dos formatos de sass, y cada uno tiene su propia extensión de archivo. Los archivos dot S A S S son el tipo de archivo original más antiguo. Te permite escribir tus CSS sin ningún corchetes rizados o semi Coghlan's. Los selectores y propiedades se distinguen por la sangría. El formato de archivo CSS de DAT es más similar al CSS regular, pero agrega en todos los ayudantes SAS como sangría, variables y más. Cualquier archivo CSS normal es un archivo CSS punto válido. Estaremos usando el formato de archivo CSS dot s en esta clase. Es más fácil acostumbrarse, y hace que sea muy fácil convertir un sitio web existente a usar sass. Algunas de las cosas bonitas que puedes hacer con sass son usar variables para guardar valores que se usan en muchos lugares. Puedes crear mix ins o extensión para que no tengas que escribir el mismo frío una y otra vez. Puedes anidar. Tus selectores ayudan a organizar tu código, y puedes crear más eficiencia. Evaluar. Para los sitios web de producción, existen otros pre procesadores CSS que puedes usar. Además de SAS, menos es la alternativa más común, y el estilista es otra opción que tiene un menor seguimiento. No es difícil cambiar a un preprocesador diferente una vez que conoces uno así que cualquier cosa que aprendas en esta clase debería traducirse fácilmente a otro. SAS es probablemente el más popular, pero menos está en algunos proyectos grandes, como Twitter Bootstrap. Por lo que puede que te encuentres usando tanto en el futuro o lo que sea las próximas grandes cosas nuevas a las que alguien se le ocurra. El punto es que una vez que entiendes cómo funciona un preprocesador, tienes esa habilidad, independientemente del idioma específico elegido. SAS está escrito en el lenguaje ruby, por lo que necesitarás ruby instalado en tu computadora. obstante, no necesitas preocuparte por tener a Ruby instalado en tu servidor Web. Solo lo necesitas donde estarás escribiendo tu CSS. Hablaremos de la instalación de Ruby en SAS en el próximo video. He tratado de estructurar esta clase en pequeños pasos para que o bien lo aprendas todo de una sola sesión o lo des un paso a la vez y simplemente te enfoques en un nuevo concepto. hoy, dehoy,la elección es tuya. De cualquier manera, deberías poder pasar por esta clase con bastante rapidez, así que empecemos 2. Instalación de Sass: instalar SAS es simple, pero sí implica usar la línea de comandos en su computadora. Sé que aquí es donde algunos de ustedes pueden querer bajar del autobús porque la línea de comando te asusta. Pero les animaría a que no se preocupen por ello y sólo sigan los pasos que les presento. Hay mucho poder que ganar y entender cómo usar la línea de comando, y realmente no tendrás que pasar mucho tiempo ahí para usar culo. Pero ayuda si entiendes qué es y cómo funciona ahora. Hay muchas herramientas por ahí que te permitirían evitar la línea de comandos, sobre todo si estás en un Mac. Pero me voy a centrar en usarlo porque creo que es valioso superar cualquier miedo o temor que pueda tener de usarlo. Este va a ser el paso más complicado de toda la clase. Una vez que superemos este paso, el resto del mismo va a ser fácil y sólo tenemos que hacer esto una vez. Entonces el primer paso es instalar Ruby, y quiero dejarte claro que no necesitas tener a Ruby en tu servidor Web. Solo necesitas tenerlo instalado en las computadoras donde vas a estar haciendo desarrollo. Por lo que si tienes un escritorio y una laptop donde sí trabajas, necesitarás hacer estos pasos en ambos equipos, pero no necesita estar en tu servidor Web. Eso fue algo que me preocupaba cuando empecé a usar sass, y resulta que no era nada de lo que necesitaba preocuparme. Los programas Ruby convertirán tus archivos sass en archivos CSS, y eso es lo que va a ir en tu servidor Web. Entonces si estás en un Mac, no necesitas hacer nada. Ya lo tienes. Habitación ser instalada con su sistema operativo. Si estás en Windows, necesitas ir a las descargas de slash de ruby installer dot org y descargar la versión más reciente del instalador y seguir los pasos. Demostraré ese proceso en un momento, y luego si tienes Lennox, solo necesitas instalar el paquete ruby. Entonces estoy en la página web y voy a elegir ladrón primero enlace de descarga porque esa es la versión más reciente. Ahí hay otras cosas que puedes instalar, pero solo es el instalador principal, el que está en la parte superior que quieres. Una vez descargado, puedes hacer clic en el archivo de descarga para seguir adelante e instalarlo, y lo único que puedes aceptar el valor predeterminado necesitas para aceptar la licencia. Pero lo único que realmente necesitas prestar atención aquí es que sí quieres comprobar ese anuncio Ruby ejecutó ALS a tu camino. Ahora lo estoy apagando por mí mismo porque no lo necesito, Pero probablemente querrás tenerlo encendido. Eso lo que hace es dejar que la línea de comando sepa siempre dónde está tu ruby. Si tiene algún problema, sin embargo, por favor publique una pregunta en la sección de preguntas y respuestas, y trataré de ayudarle. El siguiente paso es abrir la línea de comandos, por lo que si estás en un Mac, necesitas encontrar el programa terminal. Y si no estás seguro de dónde está eso, puedes escribirlo en el centro de atención, y debería encontrarlo por ti. posible que quieras acoplarlo para que tengas acceso a él siempre. Si estás en Windows, vas a encontrar el programa de comando o C M. D. Y si estás en límites, probablemente ya estés en la línea de fans y no necesitas ayuda con nosotros. Demostraré en una máquina Windows cómo llegar. Voy al botón de inicio, y sólo voy a escribir CMD. Yo lo confiné de esa manera. O también puedo ir a todos los programas y encontrar la carpeta donde estaba instalado Ruby y puedo usar el símbolo del sistema de inicio con Ruby. El siguiente paso es instalar Sass, e instalamos SAS usando las gemas de Ruby. Ruby Gems es un gestor de paquetes para extensiones ruby, y Sass es una extensión ruby. Fue escrito en Ruby. Esta es una forma de instalar programas y extensiones usando la línea Klan en lugar de tener que ir al sitio web, descargar los archivos, extraerlos e instalarlos. Por lo que es mucho más rápido si te acostumbras a instalar las cosas de esta manera. Entonces es una pequeña característica agradable de Ruby, y el comando es muy simple, y es lo mismo en todos los sistemas operativos. Es solo sacos de instalación de gema, por lo que podría tardar un minuto más en instalarse, pero suele ser bastante rápido, y ahora está instalado. El paso final no es realmente un paso que hay que hacer. Es completamente opcional. Pero una cosa que me gusta hacer después de instalar algo se acaba de comprobar la versión y asegurarme de que todo instalado. De acuerdo, así que solo escribes Ruby Dash V para revisar la versión ruby y SAS dash fee por revisar la versión SAS. También puedes escribir dash age para obtener un listado de todos los comandos SAS. Por lo que SAS ya está instalado y estamos listos para irnos. Probablemente dejaría abierta la línea de comandos porque la vas a necesitar para compilar tus archivos sass. Pero en la próxima película veremos el proyecto en el que vamos a trabajar en esta clase. 3. Resumen del proyecto: Vamos a trabajar en un proyecto real en esta clase, no en un sitio web real, sino en algo un poco más sustancial que sólo un montón de demos. Estaremos usando un proyecto que diseñé hace unos años para una clase de diseño. No es un sitio web en vivo, pero tiene algunas páginas, y es suficiente para que realmente convertamos a sass y veamos los beneficios de usarlo para escribir nuestro CSS. Tengo un enlace al código de inicio del proyecto enumerado en las notas de la lección. También puedes obtener el código para mi repositorio get hub. Después de cada paso, estoy cometiendo los cambios y etiquetándolos para que siempre puedas encontrar el código para cualquier paso aquí. Al cambiar la etiqueta, no proporcionaré un enlace de descarga a cada paso. El propósito es que intentes hacer los cambios tú mismo y jugar con un código para ver cómo funciona. Eso significará que debes pausar los videos o intentar hacer el trabajo. Después de ver el video, me estaré moviendo bastante rápido y no convertiré por completo todo en el código a sass. Haré lo suficiente para explicar los conceptos y seguir adelante después de cada video, tal vez quieras tratar de encontrar más ejemplos para implementar el concepto. A partir de esa lección, estaré usando corchetes como mi editor. Se trata de un editor de código abierto gratuito de Adobe. Lo elegí porque tiene una bonita vista previa de tu código cuando estás en el navegador chrome . De esa forma, no necesito refrescarme después de hacer cambios en el código. Obtienes esa vista previa en vivo haciendo clic en este pequeño ícono cuando tengas abierto tu archivo HTML . Por lo que este es el sitio web. Tiene una página de inicio, y hay algunas transiciones en el estado de navegación y hover. Si haces click en el primer video, puedes llegar a una página de ejemplo Instructor. Esto tiene algunas pestañas con diferentes vistas ahí. También hay una página de categoría aquí mismo. Si hace clic en el enlace de tipos de entrenamiento y si hace clic en el logotipo, puede volver a la página principal. Son tres páginas, y debería ser suficiente para que trabajemos con nosotros. Hay algunas cosas en el código que están un poco anticuadas porque hice esto hace más de dos años, y probablemente haya mejores técnicas que podríamos usar. Ahora también hay algunos bichos y errores aquí dentro. Esto era para una clase de diseño, y me estaba centrando en cómo se veía y no en el código. Pero este será un buen lugar para empezar a usar algún sass tu primer intento de usar sass tu cuenta, tal vez para incorporarlo a un sitio para el que ya has escrito algún CSS. Entonces pensé que este enfoque para aprender sass sería la mejor manera. No necesitas usar ah, 100% rápido Para tu código. Puedes escribir CSS y Sprinkle normales en algunas técnicas de sass mientras aún estás aprendiendo los conceptos. A medida que te vuelvas más cómodo con las técnicas que estoy enseñando aquí, puedes empezar a escribir tu código y sass desde el principio, y ahí es cuando se vuelve muy potente y rápido. Si echamos un vistazo al código, no vamos a enfocarnos en todo. El archivo principal en el que nos enfocaremos es este archivo CSS de estilo, que es donde se encuentra el CSS principal. Si miramos el HTML, podemos ver que estamos vinculando dedo del pie unos cuantos archivos CSS. Ahí está este archivo I e Onley, que puede que ya ni siquiera necesites, dependiendo de qué versiones de IE estés apoyando. También hay un archivo CSS de mano, que se utiliza para mostrar el sitio en pocos puertos más pequeños. Este no es un verdadero sitio receptivo, pero sí tiene un aspecto ligeramente diferente para ver más pequeña vertida. Entonces si alguien está viendo esto en su teléfono, todavía podrán ver todo. Pero sólo ha cambiado ligeramente. Realmente no vamos a cambiar nada en el archivo CSS de mano, pero cualquier cosa de la que hablemos con estilo CSS podría usarse también en CSS de mano. Si queremos ver el trabajo de previsualización en vivo, solo podemos cambiar algún texto en el HTML. Cambiaré nuevas versiones a las últimas, y cambiará de inmediato en el puerto de vista. Y luego si lo deshago, volverá a cambiar. Cambia en cuanto guardo. Por lo que este es el proyecto en el que se estará trabajando. Si aún no has descargado los archivos iniciales, debes hacerlo ahora. Si quieres tratar de trabajar conmigo. Si no quieres hacer eso, también podrías intentar abrir uno de tus propios sitios web e intentar seguir adelante. Hacer cambios en tu propio código en la siguiente lección convertirá este sitio para usar SAS. 4. Conversión de proyectos existentes a Sass: en esta lección, vamos a aprender a compilar archivos sass. Cambiaremos el archivo CSS de punto de estilo que utiliza la página Web en un archivo SAS o un archivo CSS de punto s . Lo único que necesitamos hacer esto es renombrar Archivo. Voy a llamar a los archivos CSS de punto s archivos sass de ahora en adelante, porque es mucho más fácil decirlo. Y será menos confuso cuando lo estamos comparando con archivos CSS regulares. Al trabajar con sass, haces tu trabajo en el archivo SAS, que luego se compila en un archivo CSS para tus páginas Web. compilación de SAS implica un comando simple escrito en la línea de comandos. Cambias al directorio de tu proyecto, el directorio donde está tu CSS y escribes SAS, lo que significa que vas a ejecutar un comando SAS a guiones, lo que invoca una opción SAS. Ver sin espacio antes. Esto quiere decir que quieres ver un archivo o una carpeta el nombre del archivo, que es el archivo que quieres ver Colon para indicar que ya terminaste de enumerar los archivos a ver y luego el nombre del archivo a donde quieres que vaya la salida? Este comando tomará sus archivos sass ya sea que tengan la extensión de archivo CSS dot s o la extensión de archivo dot s A S s y los pondrá a través del compilador o pre procesador y escupirá el archivo CSS. Entonces probémoslo. Tengo a mi editor abierto. Se puede ver que estoy ligado al estilo que CSS también estoy ligado a mano, que no vamos a cambiar en este momento. Estoy iniciando la página Web haciendo clic en el botón de vista previa en vivo. Entonces aquí está la página y todo parece que debería Ahora voy a renombrar el archivo de Tesis E ss en punto s CSS. El adelanto de la vida no está manejando esto, así que sí tengo que refrescar la página. Cuando miramos la página Web, ahora solo está mostrando html plano renderizado. Ya no hay CSS porque renombramos el archivo para que podamos arreglarlo haciendo el reloj. Comandante. Estoy sacando la línea del hombre y voy al directorio CSS. Si escribo d i r o l s. si estoy en un Mac nuestra máquina de límites, veré todos los archivos en mi directorio y puedes ver ese archivo sass justo aquí. Por lo que ahora podemos compilarlo en CSS irregular. Estoy escribiendo SAS dos guiones Reloj, luego estilo. Eso s CSS estilo puntos CSS. Ahora puedes ver el comando ejecutándolo creado son de estilo archivo CSS y dice sobrescribir Cada vez que escribe en el archivo CSS, va a decir que Observe que ya no estamos recibiendo el símbolo del sistema. SAS sólo está sentado ahí. Está esperando o viendo cambios en nuestros archivos SAS. Siempre que vea un cambio , recreará el CSS regular. Hay otro problema entre paréntesis. Sigue siendo un proyecto nuevo, así que aún no es perfecto, pero no reconoce cuando tengo nuevos archivos agregados al directorio. Entonces no es encontrar el archivo CSS dot, así que necesito cerrarlo y volver a abrirlo. Ahora lo puedo ver y tengo que reiniciar la vista previa de la vida y ahora podemos ver que el sitio web está vuelta a la normalidad porque hay un archivo CSS. Nada ha cambiado. No lo hemos sabido, hicimos algún cambio en la página web todavía, pero si miramos el archivo SAS y el archivo CSS. Se ven casi exactamente iguales. Va a haber algunas diferencias de formato y espaciado, pero aparte de eso, son lo mismo y deberían ser lo mismo porque realmente no hemos usado todavía ningún cess y texto. Ahora bien, si queremos ver cómo funciona esto, podemos cambiar algo en el archivo SAS. Voy al selector de cuerpo y cambiando el color de fondo a rojo. Ahora, antes de guardar el archivo, quiero que revisen la línea de comandos y cuando lo guarde, noten lo que pasa. El archivo SAS cambió, por lo que reescribió el archivo CSS. Se puede ver que dice anular. Parece que la vista previa en vivo no está detectando el cambio. Por lo que sólo voy a dar clic en la ventana del navegador. Y ahora parece que el cambio y el cambio es el estilo. Y luego puedo volver a ajustarlo a la normalidad y podemos ver el cambio detectado y el color de fondo ha cambiado de nuevo. Entonces así es como usas SAS. Siempre que vas a estar modificando tu CSS, solo tienes que recordar arrancar el comando watch. Lo dejas corriendo en segundo plano mientras trabajas. Realmente no necesitas ponerle atención a ello a menos que haya un problema. Entonces, para resumir, inicias el comando SAS watch, haces tus cambios en los archivos SAS, y luego sass creará tu CSS para ti. 5. Variables: El primer rasgo de ayuno de la que quiero hablar es de variables, y eso se debe a que las variables son lo que me vendió en SAS. Si fuera la única característica de cess, probablemente seguiría queriendo usarla. CSS eventualmente va a tener variables, pero aún no lo tiene. Y, por supuesto, incluso una vez que comiencen a implementarse, va a tomar algún tiempo para que todos los navegadores estén a bordo. Entonces veamos cómo funcionan las variables SAS y cómo puedes acelerar tu desarrollo con, um, definas una variable con un signo de dólar podrías nombrar tu variable. Cualquier palabra que use una combinación de letras guiones bajos y guiones. Después de nombrar tu variable, le das un valor. El valor de su variable puede ser un valor hexadecimal para un color, una cadena de números de texto o, a veces, cae el tour. Depende de dónde vayas a usar la variable. Para usar la variable, primero debe definirla, y luego acaba de usar el nombre de la variable donde quiera que hubiera escrito el valor de la variable. Si miramos el CSS que definí en el proyecto, verás que puse un comentario en la parte superior del archivo para los colores principales utilizados en el proyecto. Se puede ver cómo corresponden a los colores en la página Web. Incluso poner los comentarios en la parte inferior para que siempre tenga fácil acceso a los valores de color cuando estoy trabajando en un proyecto usando sass mix que innecesario porque podemos cambiar fácilmente el color en un solo lugar si es necesario. Entonces hagamos nuestros colores en las variables. Ahora moveré este comentario hacia abajo a donde quiero que se definan las variables en el código. La próxima vez hicieron las variables nombres significativos? Es mejor no nombrar a las variables un color como el azul, porque si el diseño cambia, los nombres ya no tendrán sentido. Estoy usando base y acento ahora voy a hacer una búsqueda y reemplazar por lo que confiné en todas partes . Utilizo esos colores y los sustituyo por la referencia variable. Solo necesito tener cuidado de no reemplazar el color de definición variable, y en realidad hice eso en el último, así que solo puedo deshacer eso. Ahora me aseguro de que estoy viendo los archivos CSS desde la línea de comandos y luego puedo volver al editor y guardar mis cambios, y parece que hay un error. El mensaje me está diciendo que el problema está en línea 29. Entonces voy a ir a mirar ahí. Parece que tengo una referencia a mi variable antes de que se definiera. Por lo que necesito mover mis definiciones de variables más arriba en el archivo. Por lo general, ponlos en la parte superior después del restablecimiento CSS para evitar esto. Pero simplemente no lo conseguí en el lugar correcto. Por lo que esta vez funcionó. Y si miramos el CSS, se puede ver que donde definimos las variables, ahí no hay código. Simplemente podemos ver el comentario porque eso no es válido. CSS. En cambio, cuando se compiló, buscaba el nombre de la variable en cualquier parte del código y lo reemplazó por el valor real de la variable. Ahora bien, si nos fijamos en la página web, los colores aún se ven bien. También podríamos hacer una variable para el fondo. No tengo muchas declaraciones divertidas en el CSS porque cambié el Fondo de Cuerpos y se dio cascada a lo largo de toda la página. Pero podemos tratar de hacerlo aquí de todos modos porque Hay momentos en los que estás usando múltiples fondos en un sitio web. Haré una variable llamada fuente base y la usaré en cuerpo. Entonces, en realidad, todo esto no es muy emocionante. Convertir CSS para usar variables aún lleva algo de trabajo, pero lo bueno de ello es cuando decides que quieres cambiar uno de los valores. Digamos que quería que mi color de acento fuera un verde ligeramente diferente. Puedo cambiar el valor de las variables, y ahora es un color más brillante y solo tengo que cambiarlo ahí solo en ese lugar. Ese es el poder de sass y lo que hace que sea agradable de usar. Es fácil e indoloro modificar tu código. Por lo que se regeneró el CSS. Y cuando miro el sitio web, los colores han cambiado. Desafortunadamente, el verde está en mis iconos, las imágenes, por lo que los colores se airean fuera de él, por lo que esos tendrían que cambiarse también. Si realmente quisiera hacer este cambio, si hoy estuviera haciendo este sitio web, probablemente haría las imágenes en blanco con fondos transparentes y luego colorearía el CSS de fondo para hacerlo más flexible. Entonces cambiaré eso de nuevo e intentaré cambiar el color base a negro, y puedo ver rápidamente la diferencia en el fondo y los botones. Una de las grandes cosas de esto es que puedes hacer algún trabajo de diseño en el navegador, donde realmente llegas a ver cómo se ven las cosas. No necesitas estar en Photoshopped para jugar con tu diseño, así que para resumir, para declarar una variable, solo recuerda definirla en la parte superior. Empieza con un signo de dólar antes de darle un nombre. Pon el valor al final, y luego en cualquier lugar donde quieras usar ese valor, solo puedes escribir el nombre de la variable. Y si alguna vez quieres cambiarlo, solo necesitas cambiar el valor de las variables. En la siguiente lección, hablaremos de cómo SAS maneja los comentarios un poco diferente al CSS regular. 6. Comentarios: en este video. Yo quiero hablar de comentarios con sass. Parece una cosa menor, pero realmente aprecio las pequeñas diferencias entre los comentarios CSS regulares y los comentarios SAS . En CSS, pones tus comentarios dentro de una slash más Asterix. También tienes que cerrar tu comentario con un Asterix plus slash. Esta es una sintaxis muy común para comentarios en muchos lenguajes de programación. Commons conspiran hombre múltiples líneas de esta manera, y eso podría ser útil cuando tienes un gran bloque de texto que quieres en tus comentarios . El problema es que esta combinación de teclas puede ser un dolor de escribir. Siempre tienes que cerrar tu comentario. No se puede simplemente iniciar el comentario. SAS le permite usar comentarios de una sola línea en su lugar, que me resulta más fácil anuncio de Toe para un comentario de una sola línea. Simplemente tecleas dos barras y cualquier cosa que siga esas barras en esa línea se convertirá de nuevo en un comentario. Este es un comentario en impuestos en muchos idiomas. No obstante, CSS regular no permite comentarios de una sola línea, por lo que tenerlos en sass es una característica agradable. Puedes usar ambos tipos de comentarios en tus archivos SAS. Los comentarios de una sola línea no se agregarán a tu CSS. Se agregarán los comentarios de múltiples líneas. Personalmente, trato de solo usar el formato de dos barras inclinadas porque no necesito comentarios en mi CSS. Los necesito en los archivos SAS, que es donde edito mi código. Por lo que tengo mi archivo SAS abierto y estoy viendo los cambios en el archivo SAS. Si miramos el código existente, se pueden ver todos los comentarios que se están mostrando como grises. Eso se debe a que el tema del editor de texto establece comentarios a Gray. Todos son de tipo multi línea porque eso era necesario cuando la sonrisa era un archivo CSS normal . Voy a cambiar estos comentarios para que sean del tipo de línea única con dos barras. Dejaré este comentario como comentarios regulares de CSS para que podamos ver la diferencia cuando guardamos el archivo. Cuando miramos el CSS, se puede ver que ahí hay muy pocos comentarios. Ahí está el que quería salvar y hay unos cuantos que echo de menos. Los comentarios son muy útiles para mantener tu CSS limpio y organizado para más adelante cuando quieras hacer cambios en el diseño. , no los necesitas en tu CSS final Sin embargo, no los necesitas en tu CSS final, por lo que usar comentarios de estilo SAS te permitirá comentar tu código tanto como quieras sin agregar nada al CSS real. 7. Nesting: anidar es una característica de fast que te permite anidar tus selectores dentro de otros selectores en lugar de tener que escribir todas las etiquetas en tu selector como H one y A para una etiqueta de anclaje dentro de una H one. Nos puedes la etiqueta de anclaje dentro de tus soportes H one. Esto significa que no tienes que seguir reescribiendo h una etiqueta una y otra vez. Cuando el SAS compila crea el selector de longitud completa, agregando el selector superior a lo que anidaste dentro. Realmente ayuda a mantener tu CSS organizado, que es la razón principal por la que me gusta Nestea. También puedes conocer sub propiedades de cosas como fuente, fondo o borde. Se puede ver aquí estaban anidando el tamaño y el peso de la familia dentro de los soportes del fondo. En realidad no uso esto en texto porque generalmente prefiero el texto corto de Hansen, pero algunas personas sí lo encuentran útil, así que usemos algún nido een en el proyecto. Podemos ver que el primer selector no reset o basado aquí es body. Ahora, aquí es donde podríamos crear algunos problemas. Todo en la página va a ser un hijo del cuerpo, así que Técnicamente, podrías anidar todos tus selectores dentro del selector del cuerpo, pero no queremos hacer eso. No hay razón para agregar cuerpo a tus otros selectores. Y si no hay razón para tener esa etiqueta adicional en tu selector, no deberías meterla, así que dejaremos esa sección sola. Tenemos una situación similar con contenedor, que es el contenedor de 960 píxeles de ancho del contenido de la página. Por lo que esto trae un punto importante. Una de las quejas sobre SAS es que puede incentivar el mal CSS. No estoy seguro de que esto sea cierto, pero una razón por la que podría hacer eso es por desagradable. El uso de la anidación hace que sea tentador estropear todo porque se ve bien y organizado. Pero realmente solo debes anidar tus selectores si necesitas la especificidad que he encontrado al trabajar en sitios web más grandes que si solo agrego clases de etiquetas adicionales o me des a mis selectores cuando realmente los necesito, el CSS es más fácil de mantener y trabajar con. Un objetivo común que la gente cita es mantener tu anidación a dos o tres niveles. Por supuesto, esto es sólo una pauta, y podría estar rompiendo eso aquí en un sitio más pequeño. Esto no es tan importante, pero cuando comienzas a trabajar en sitios web a gran escala con mucho CSS, esto sí se vuelve más importante. Por lo que primero me voy a centrar en el área de cabecera. Es posible que ni siquiera necesito incluir Header y todos mis selectores aquí. Pero no voy a volver a factorizar el código en este momento más que tratar de convertirlo en sass. Entonces voy a empezar con este h uno y moverlo hacia arriba y sangrada para dejar claro que estoy anidando . Entonces eliminaré el encabezado de palabra del selector. Si lo dejara en, el CSS no sería correcto porque compilaría dos encabezado H uno en lugar de solo encabezado h uno. Puedo repetir este proceso con todos los demás selectores que comienzan con encabezado. Tomaré este grupo grande y lo cortaré y pegaré arriba, sangré y reemplazaré la palabra cabecera por nada. Ahora se parece a este selector. El P no estaba agrupado con los otros, así que lo voy a mover un oleaje y en realidad hay dos electores de pieza de cabecera diferentes en mi código. Este es un buen beneficio de hacer este cambio porque te ayuda a limpiar tu código y organizarlo Así que este tipo de problemas se hacen más evidentes. Solo necesito un selector p de cabecera, así que voy a arreglarlo ahora mismo. También lo voy a mover más alto porque usualmente me gusta mantener mis selectores menos específicos en la parte superior. Ahora puedo hacer un poco más en la dentadura a cuenta. Es probable que realmente no necesite anidar la cuenta de clase dentro del encabezado en el sitio pequeño . Pero si se convirtió en un sitio real, podría necesitar esa especificidad. Entonces lo voy a dejar adentro ahora. Quiero ir a asegurarme de que estoy viendo cambios para ver si cometí algún error. Voy a guardar el archivo y parece que todo compilado. Bien. Voy a echar un vistazo rápido al encabezado y muestra que las cosas el aire siguen funcionando. De acuerdo, no voy a hacer que me veas hacer el resto del CSS En su lugar, Si quieres asegurarte de que realmente obtienes este concepto, te recomiendo que pausas el video e intentes hacerlo por tu cuenta. Todavía hay varias áreas en las que trabajar como el área de NAB, el jugador de área de lista lateral. Y aún más que eso, te mostraré muy rápido. Lo que he cambiado aquí. Yo no hice la zona de knave. Lo anidé más en los selectores UL y aliados. Lo único que no anidé fue esto, que tiene una coma que separa un selector de pie de página. Entonces hay dos selectores separados en esta línea, así que no quería estropear eso porque estropearía el selector de pie de página. Yo sí hice el pie de página abajo en la parte inferior, la sección de tipo, que es para este menú de superposición. Aquí anidé el código knave jugador, que forma parte de la segunda página, y había más manchas que anidaba. Si quieres ver el estado completo de mi código, te compartiré un enlace al código en Get Hub para que puedas comparar tus cambios a los míos. El punto final que quiero hacer es que cuando primero estás aprendiendo sass, es una buena idea del dedo del pie. Mira tu salida CSS. Después de guardar tus archivos sass, mirar lo que está haciendo el pre procesador con tu sass te ayudará a aprenderlo más rápido. Si nos fijamos en el área Sombrerero. Se puede ver que la salida CSS se parece al código original. Volvemos a ver Cabecera H uno. Si nos fijamos en el área de knave, podemos ver ahora a ti al L. I A. Y al grupo completo de selectores en esa línea. La única diferencia real es el inventar en el nuevo archivo. El anidamiento es una característica útil de SAS porque puedes escribir menos, sobre todo cuando estás creando tu CSS desde cero. Te ayuda a mantener tu código organizado y más fácil de leer y mantener. Debe usarse con precaución, sin embargo. Recuerda el dedo del pie en Li ness cuando lo necesites. Los selectores menos específicos generalmente son más fáciles de mantener cuando estás escribiendo tu CSS. 8. Excede: en este video, voy a hablar del comando extend y SAS Extend es una forma para que un selector herede todas las propiedades de otro selector. Previene la necesidad de duplicar código. Podría usarse para definir conjuntos de propiedades que un grupo de elementos podría compartir. Se extiende a una lista separada por comas de selectores. En este ejemplo, tenemos algo de estilo para un botón. Se trata de los estilos de base para un botón que usarán la mayoría de los botones del sitio. Después podrás tener otros botones que tendrán estos estilos, pero también puedes personalizarlos con propiedades únicas. Esto evita que necesites copiar todas las propiedades duplicadas para estos botones especiales puedes ver cuando se compila el SAS. Simplemente agrega la clase especial al selector de botones, y solo deja las propiedades únicas en los especiales. Último selector a continuación. Escribir tu código con el comando EXTEND te permite mantener tu código más corto y organizado antes de entrar en nuestro proyecto. Intentemos jugar con un ejemplo usando este concepto de botón. Tengo estos dos archivos de inicio que puedes descargar en la prueba de paso anterior. HTML es una página Web sencilla con un botón en ella y un div con una clase de C T A. Para llamada a la acción. También hay un archivo SAS de prueba, con algunas variables para el color y la fuente y los estilos de botón base. Se puede ver que el archivo HTML se vincula para probar CSS, que aún no existe, por eso nuestra página no tiene ningún estilo. Podemos crear el CSS viendo el archivo CSS de prueba de Dios s. Es el mismo comando que ya hemos usado, pero esta vez reemplazamos la palabra estilo por test. Ha habido una actualización a bracket desde que empecé a filmar esta clase, así que ahora puedo golpear F cinco y refrescar la carpeta para poder ver el CSS de prueba sin cerrar y reabrir el editor. Al hacer clic en mi vista previa, se pueden ver los estilos en el botón. Por el momento, aquí no hay nada nuevo. Ahora si quiero que la llamada a la acción Div toe parezcan mis botones, pesar de que en realidad no es un botón, puedo usar el comando de tend de teatro. Entonces en el archivo SAS, usaré el selector de clases c t a y tipo. Agregar botón extender. Esto significa que todos los estilos del botón se aplicarán a cualquier cosa con el C t a clase . Cuando lo guardo y luego hago clic en el navegador para asegurarme de que reconoce el cambio puedes ver el diff ahora se parece al botón, con la excepción de que el ancho es 100% del puerto de vista en lugar de un tamaño de botón normal . Eso es porque estamos lidiando con un dip en lugar de botón. Siempre es bueno mirar el CSS generado, y podemos ver que la clase C T A fue agregada a la lista de selectores en el botón para que pueda agregar un con a la clase c t A y hacer alineado el Tech center. Lo guardaré y podremos ver los cambios en el navegador. Entonces echemos un vistazo al CSS. Las propiedades únicas para ver Clase TA están ahora en su propio negro de código. Todavía se agrupan las propiedades que se comparten a causa de la extensión, por lo que ahora podemos mirar nuestro proyecto y encontrar lugares para usar eso a la extensión. Cerraré los archivos de prueba y abriré los archivos del proyecto En su lugar, también necesito dejar de ver la prueba y empezar a ver el estilo de nuevo. El código que estoy repitiendo a menudo sin ningún cambio es la propiedad de transición. Debido a que esta es una propiedad CSS tres, hay múltiples líneas repetidas debido a todos los prefijos de proveedor que necesitamos. Mi primer uso de la transición es en la navegación, donde el color de fondo cambia al pasar el cursor sobre los botones. Solo estoy transicionando el color de fondo aquí. Estoy usando una duración de 0.3 segundos y flexibilizando tipo de facilidad en. Si no estás familiarizado con las transiciones, una transición es un cambio suave de un estado a otro, por lo que podemos transitar entre colores, tamaños y más. Por lo general estos aire se hacen cuando el estilo cambia en el hover. No pones el código de transición en los estilos de movimiento, sin embargo los pones en los estilos base. Esto permite que la transición ocurra cuando se pasa el cursor sobre algo, y también cuando se deja de rondar. Si buscamos otros lugares con transición, podemos ver que hay una transición en las recién llegadas con un poco pop up con el tipo de trabajo fuera y nombre. Esta transición utiliza todo porque está transitando otras propiedades y no el color de fondo . Si dices todas las propiedades que son diferentes en el hover, will transition en este caso realmente estaban transitando la posición y opacidad de la caja para ponerlo a la vista. En general, lo mejor es apuntar a las propiedades en las que realmente estás transicionando en lugar de usar todas por razones de rendimiento. Pero la realidad en el pequeño sitio es que realmente no va a doler, así que voy a usar todo en mi transición configurada en todas partes. Las otras transiciones están en el hover en el menú pop up y en la página del tipo de entrenamiento, el fondo se expande y se hace más grande. Entonces voy a configurar una propiedad de transición base usando la transición de clase. Realmente no tengo nada en la página con una clase de transición, pero lo estoy llamando así porque tiene sentido. Copiaré aquí las cuatro líneas de código, usando el todo para propiedades para la transición. Ahora, En todas partes tenía el código de transición, simplemente reemplazaré esas líneas con en la transición DOC extender. Ahora lo guardaré y echemos un vistazo al CSS. Se puede ver que después de mi clase de transición, tengo los cuatro selectores donde transición extendida. Todos están agrupados aquí usando el mismo código de transición. Si busqué la propiedad de transición a lo largo de mi CSS, no la encontraré en ningún otro lugar que no sea aquí. Este código está bien, pero lo extraño es que la clase de transición no es realmente necesaria. No hay etiquetas en mi código que tengan esto como clase, y parece raro tenerlo en mi CSS final. No duele nada, pero no es necesario. El motivo por el que no lo he hecho, sin embargo, es porque necesitamos un selector base para establecer nuestras propiedades de transición en. En versiones tempranas de sass, solo tenías que aceptar esta rareza. Pero versiones posteriores de Sass agregaron lo que se llama marcador de posición. Un marcador de posición te permite configurar una clase base y no te obliga a ponerla en tu CSS. Es algo así como una súper variable. Se define un marcador de posición con el símbolo de porcentaje y luego el nombre. Después define todas las propiedades que desea, el marcador de posición para tener. Entonces en nuestro ejemplo, lo único que necesitamos cambiar es la referencia a la transición de clase con un punto a una referencia al positor de transición con un porcentaje simple. Tenemos que cambiar esto en todas partes ampliamos también la transición. Ahora bien, si miramos el CSS, se puede ver que ya no tenemos esa clase innecesaria de transición. Lo único que usa la transición son los cuatro selectores que la necesitan. Es un pequeño cambio, pero hace que tu CSS sea más preciso y no creas selectores innecesarios con el marcador de posición. Por lo que resumir a extender es una gran manera de evitar mucha duplicación de código. Es especialmente útil para CSS tres selectores que requieren muchos prefijos de proveedor o cualquier tipo de estilo que esté repitiendo en todo su sitio. Si el código que está duplicando no pertenece a un selector específico y desea crear un conjunto genérico de código que pueda extender, el positor se puede usar en estos casos. 9. Mezclas: a Mixon es otra forma de organizar código que se duplica una y otra vez en tu CSS. Es similar agregar extender, pero con mix ins, puede especificar diferentes valores de propiedad pasando y argumentos. Es diferente a extender en que todo el bloque de código de tu mezcla se copiará al selector. Esto puede hacer que tu código sea más largo. Úsalo cuando los valores de las propiedades se airen diferentes en todo tu sitio. Si siguen siendo los mismos usados en extender en su lugar, empecemos de inmediato con un ejemplo. Estoy en textos subrayado mezclando punto html, que tiene tres saltos en él. Lo que quiero hacer con esta página es darle estilo a cada div como una caja de colores. Cada caja tendrá un tamaño diferente en última instancia, pero empezaremos con tenerlas todas del mismo tamaño. Cada uno de estos dibs tiene un nombre de clase único y algún texto. El archivo enlaza para probar ese CSS, que en realidad existe en mi carpeta. Pero ninguno de los CSS existentes le dará estilo a este HTM Oh actual, así que aún no vemos ningún estilo en la página, así que si buscamos el archivo SAS, es el mismo archivo con el que terminamos después del último ejemplo. Sí quiero establecer una fuente base en el cuerpo del archivo para que todo el texto use el fondo bajo en lugar de este tiempo. Romano. Usaré el fondo basado en Signo de Dólar Variable, que ya está por encontrar voy a ver el archivo culo de la prueba Así que ahora podemos ver que la fuente ha cambiado. Ahora, en lugar de empezar con una mezcla en, voy a revisar cómo haríamos esto con esa medida. Quiero crear algunas cajas para cada DIV. Usaré el marcador de posición, sintaxis y diga cuadro de signo de porcentaje y luego le daré propiedades A con alto margen y relleno. Entonces le daré un color de fondo usando la variable de acento. Ahora puedo extender la caja para cada una de las salsas. estoy haciendo todos únicos porque mi suposición es que cada caja tendrá algunas propiedades únicas . Si no lo hicieran, simplemente les asignaría a todos el mismo nombre de clase. Yo lo guardaré y luego podrás ver que las cajas toman forma. Ahora, si nos fijamos en el CSS, se puede ver cada clase en una lista con todas las propiedades de caja Abdic aturdido, crea código agradable, conciso. Ahora probémoslo con el Nixon en su lugar. Entonces la sintaxis para eso es la mezcla de actos. Y luego le das la mezcla en el nombre así voy a decir en caja de mezclas para cada caja. Tengo que cambiarlo para decir en include box cuando digo que nada ha cambiado, como esperaríamos. Si miramos el CSS, sin embargo, se ve diferente. Cada clase tiene todas las propiedades de la caja añadidas a ella. Hay mucha duplicación. El motivo por el que te estoy mostrando esto es porque esto es un error. Hice mucho cuando empecé a usar sass. Aprendí lo primero de Nixon, y así los usé en todas partes. Tenía código duplicado. Pero usar una mezcla no mantiene tu CSS final más pequeño. Usar at extend funciona mejor en muchos casos, pero en Mixon es muy útil para aquellos tiempos en los que se desea la capacidad de cambiar los valores de sus propiedades. Entonces en este ejemplo, quiero mezclar en eso permitirá diferentes tamaños de caja, por lo que voy a agregar parámetros o argumentos como se les llama oficialmente y SAS para el ancho y la altura que hace eso agregando paréntesis después del nombre y poniendo los argumentos dentro, sumaré ancho y alto con un signo de dólar antes de la palabra para indicar que se trata argumentos. Cada argumento que agregue está separado por una coma. Ahora necesito usar thes argumentos en mi Mixon para que el ancho sea lo que se pase desde donde se llama la mezcla. Normalmente, me gusta dar un valor predeterminado a mis argumentos. De esa manera, si el código que llama al Mixon no pasa un valor, el Mixon seguirá funcionando. Para hacer eso, escribes dos puntos después del nombre del argumento, y luego das el valor predeterminado. En este caso, voy a usar ah, 100 pixeles. Entonces nuevamente guardo y miro la página, y nada ha cambiado desde entonces. El ancho y la altura siguen siendo de 100 píxeles Ahora. Esta vez cambiaré la caja uno para tener un ancho de 50 píxeles y una altura de 200. Cuando digo que se puede ver el cambio. Ahora, puedo cambiar de caja, también, y simplemente pasar en un parámetro que se asignará al primer argumento. El ingenio. Por lo que los argumentos son opcionales cuando doy valores predeterminados, podemos crear argumentos para cualquier cosa en la mezcla en que tenga un valor podríamos hacer el relleno de margen o color de fondo. Si quieres una práctica un poco más, tal vez quieras intentar hacer algunos argumentos más aquí para que puedas crear mix, ya que sin argumentos y sass. Pero si te encuentras haciendo esto, detente y considera si agrega. Extender es lo que realmente querías usar. Si no necesitas cambiar los valores, entonces intenta en extender en su lugar. Si sí necesitas cambiar los valores, entonces quieres mezclarlo. Echemos un vistazo a nuestro proyecto ahora y veamos si podemos crear una mezcla para las esquinas redondeadas en este sitio. Tengo muchas esquinas redondeadas, pero el radio del borde tiene un valor diferente en muchos de ellos. Eso nos convierte en un candidato perfecto para un Mixon. Debo mencionar que cuando se creó este diseño, era más importante utilizar todos los prefijos de proveedor para radio de borde. Pero ese ya no es el caso. Todos los principales navegadores hoy en día están usando radio de frontera. lo único que tal vez quieras preocuparte son los primeros navegadores de IE como i e ocho. Estoy usando CSS tres pastel, que es este archivo de HTC de punto pastel. Cuando tengo este archivo circular para hacer que Border Radius funcione, i e. solo necesito agregar esta declaración de comportamiento. Entonces hoy realmente solo necesitamos dos líneas de código para esquinas redondeadas. Pero voy a dejar este ejemplo, como es por ahora. Si utilizo un mix in para definir mis esquinas redondeadas y el frío cambia con el tiempo como lo tiene con el radio de borde, es muy fácil modificarlo en un solo lugar. Voy a copiar estas cinco líneas de código y crear una mezcla con ellas. Voy a la parte superior donde creo mi marcador de posición para la transición y las variables porque me gusta mantenerlas juntas para crear la mezcla. Escribo en la mezcla y luego el nombre, que llamaré redondeado, luego paréntesis para los argumentos y pegaré en las cinco líneas. Sólo voy a agregar un argumento porque estoy manteniendo todos los valores de radio iguales. Voy a por defecto a siete píxeles porque ese es el valor que ya usé en varios lugares . Podría ser cualquier cosa, sin embargo. Ahora, en todas partes uso ese valor. Tengo que cambiar los siete píxeles al radio lateral del dólar en todas partes. Estoy usando radio de frontera con un solo valor. Voy a incluir este Mixon para reemplazar las cinco líneas de código en este 1er 1 No necesito pasar un valor en porque quería ser siete píxeles, que es el predeterminado, y este siguiente también. Ahora para este, sí necesito pasar en el radio, que es de 10 píxeles no puedo usar redondeados aquí porque esta es una pestaña y no se puede usar la versión abreviada de border Radius. En cambio, podría crear una mezcla de pestañas y más tarde si quisiera, y luego voy a pasar y cambiar el resto. Ahora lo guardaré, y necesito asegurarme de que estoy viendo el archivo de estilo y luego debería escanear el sitio y asegurarme de que todas las esquinas aún estén redondeadas. Creo que todo se ve bien. Echemos un vistazo al CSS generado. Si busco radio de frontera, no encontraré la mezcla y la definición, pero lo veré en todos los lugares donde necesitaba a la vuelta de una esquina. Ahora aquí está la parte bonita. Si quiero mejorar mi CSS porque no necesito esos prefijos de trueno. Aiken simplemente cambia la mezcla, y el código se cambiará en todas partes donde se incluya la mezcla. Después de guardar y volver a mirar el CSS, puede ver que solo se están usando dos líneas de código aquí, y eso se cambió en todas partes que utilicé el Mixon. No se cambió en las pestañas porque no usé la mezcla ahí dentro, pero en todas partes ha cambiado. Si querías crear una mezcla para las pestañas, tienes un par de opciones. Una cosa que podrías hacer es cambiar la mezcla redondeada en remolque, tener cuatro argumentos, uno para cada una de las esquinas, y luego podrías especificar el radio de cada esquina. No me encanta realmente este método, sin embargo, porque entonces tienes que especificar las cuatro esquinas cada vez que llamas al Mixon. Si no estás usando los valores predeterminados, así que probablemente crearía un segundo Mixon para las pestañas. Y como las pestañas necesitan que los 1er 2 rincones sean los mismos y el segundo sea cero, todavía sólo necesitaría un argumento. La única diferencia es la forma en que llamaría radio de frontera en este sitio, Solo hay un lugar con taxis, así que realmente no necesito esta mezcla. Pero si estás trabajando en el sitio con diferentes pestañas, posible que quieras crearlo por ti mismo. Algo a tener en cuenta es que hay todo tipo de mezclas por ahí que otros han desarrollado. Se pueden pensar en ellos como enchufes. Un gran conjunto de mix ins viene con Compass, que no estoy cubriendo en este curso específico, pero probablemente formará parte de un curso futuro. Nixon son geniales para usar cuando se tiene un grupo de estilos que se repiten una y otra vez, pero con ligeras variaciones entre ellos. Si utilizas argumentos para cambiar esos valores y diseñarlos con cuidado, puedes escribir mucho menos código. 10. El selector de padres: en esta lección, vamos a hablar del selector de padres. El selector de padres es simplemente el símbolo ampersand. cualquier lugar que utilices este símbolo en tu código, será reemplazado por unos padres anidados. Electores. El elector de padres sólo se puede utilizar cuando estás anidando selectores. Si no estás anidando, no tendrá ningún significado. El selector de padres también te permite clases pseudo de atún como hover y enfocar. Podría ser utilizado en cualquier lugar dentro del selector. Esto permite algunas opciones interesantes a la hora de organizar tu código. Veamos algunos ejemplos. Este 1er 1 solo está mostrando un simple flotador con el cambio del color del texto. Se compila a dos líneas como esta. El siguiente es similar pero muestra que puedes usarlo con clases adjuntas a tu selector de padres . Por lo que esto se convierte en H tres puntos info. Eso significa que todos los H threes con una clase de info tendrán un tamaño divertido de 1.1 extremos. Tenga en cuenta que esto no es lo mismo que simplemente anidar la clase info dentro de su selector H tres . Eso compilaría dos H tres space dot info, que se aplicaría a cualquier cosa dentro de tu etiqueta H tres que tenga una clase de info, digamos, posiblemente una etiqueta span o algo así. Este último ejemplo muestra que no tienes que poner el selector de padres al principio. Aquí puedes ver a los padres. Lecter viene después de un nombre de clase. Este patrón podría usarse si quisieras darle estilo a las dos etiquetas H de manera diferente, dependiendo de en qué página estés. Esto compila a esto. Podría ser un poco difícil envolver tu cerebro alrededor de esta idea al principio porque estás anidando algo que realmente no está anidado en HTML. Pero una vez que obtienes cómo funciona, este patrón puede ser útil en ciertas situaciones. Vayamos al proyecto. Tengo los archivos abiertos y la vista previa en vivo en ejecución. También ya estoy viendo el archivo SAS. Mientras me preparaba para esta lección, noté que hay un problema y me gustaría solucionarlo primero. Está justo aquí con el carrito. El auto debe estar al lado de los enlaces de soporte y cuenta no debajo de él. Podemos ver la razón de esto si miramos primero el archivo SAS, estoy peinando el enlace de la tarjeta en función de los atributos ásperos de edad, pero cuando nos fijamos en el enlace en la página de índice, no hay H áspero igual carro. Lo cambié en algún momento porque no quería enlazar a una página que no existía en el sitio. Ahora, ciertamente podría evitar este problema por completo simplemente agregando una clase a esta etiqueta de ancla. Pero quiero mantenerlo adentro para que veas cómo va a trabajar el elector padres con esto. Cuando arreglé ese enlace a, digamos, carrito, podemos ver que la tarjeta se ha movido, pero en realidad todavía tiene que subir. Entonces si vuelvo a mirar el archivo SAS, se puede ver que tengo un posicionamiento absoluto en esta sección del carrito de compras. Se posiciona absolutamente, al primer elemento padre que se posiciona relativamente, que en este caso es la tecnología de cabecera. Así funciona el posicionamiento absoluto. Pero se puede ver que también tengo un margen negativo en la imagen dentro del enlace, y eso es lo que la está estropeando. También noté que tengo plática emergente. Además de la posición superior de cero, estoy moviendo la posición del enlace alrededor con posicionamiento absoluto y con márgenes y esto está haciendo algún CSS desordenado. Esto me pasa cuando estoy tratando de poner las cosas en su lugar. Pero por lo general trato de limpiarlos más tarde, y en este caso, nunca lo hice. Voy a comentar estas dos líneas de margen y ver dónde estamos. Esto se ve mucho mejor, pero el texto está demasiado cerca de la imagen ahora. Le daré un margen derecho de ocho píxeles, y eso le ayudará a darle algo de espacio, pero todavía no está alineado bien, así que usaré una altura de línea para centrarlo mejor. Eso se ve mejor, pero realmente no es perfecto. En mi opinión, no me gusta que la línea Items tenga una línea de base diferente a la de soporte o los enlaces de su cuenta . Esta zona realmente debería ser rediseñada. Pero como ese no es el propósito de esta lección, voy a dejar por ahora. Ahora que eso está limpio, podemos empezar a usar el lachter de los padres. Empezaré aquí mismo. Ya que tenemos un estado flotante, lo moveré hacia arriba y sustituiré el A por el ampersand. También borraré estas líneas innecesarias. También podemos ness thes dos líneas con la referencia de atributos también no estamos guardando ninguna pulsación aquí o haciendo nuestro código más corto, pero lo estamos manteniendo organizado. Todo el código relacionado con ese tanque de anclaje está en un solo lugar. No lo puedes ver en pantalla, pero estamos anidados dentro del selector de encabezado. Por lo que la etiqueta a está anidada dentro de la clase de cuenta, que está anidada dentro del selector de etiquetas de encabezado. Por lo que nuestro padre en este caso es encabezado esa cuenta A. Si miramos el CSS generado, se puede ver que el selector de padres se pone justo antes de los paréntesis header dot account A . Se puede ver en todas partes pongo el ampersand, lo reemplazó con el selector de padres. Si vuelvo a buscar hover, puedo reemplazar este también. En este ejemplo, puedo reemplazar la U. L L I y un selector por el selector de padres porque ese es el padre aquí. Si estuvieras escribiendo este sass desde cero, ese es el tipo de cosas que ahorra muchas pulsaciones de teclas. Y a la mayoría de las personas que escriben código les encanta guardar esas pulsaciones de teclas, incluyéndome a mí. Ahora no siempre podemos decir que las cosas funcionaron porque nada está cambiando en la página web. Intentemos cambiar el color de fondo cuando pases por blanco para que realmente podamos ver que esto está funcionando ahora. Cuando pasamos el cursor, el botón desaparece porque coincide con el color de fondo. Entonces esta es, ah, horrible decisión de diseño, y volveré al color del acento en su lugar. Yo sólo quería probar que lo que estamos haciendo en realidad está funcionando. Busco hover otra vez y noto que realmente no puedo hacer este. No hay manera de conseguir que los padres elector toe trabajen aquí porque el padre realmente tiene una nueva superposición de puntos span y lo que quisiéramos que compilara. Dos es punto sabía un cool y hover superposición sobresaliente. No podemos romper el selector de padres en dos piezas, que es lo que quisiéramos hacer aquí. Este próximo funcionará, sin embargo, y también tenemos una etiqueta 80 con una clase activa. Podemos usar el selector de padres aquí. Además, se puede ver que la clase activa tiene un fondo blanco y la clase de desplazamiento tiene el color de acento . Entonces movamos los dos dentro de la etiqueta A y usemos aquí el selector de padres. Probablemente haya algunas áreas más aquí que pueden usar un selector de padres, pero espero que ya tengas la idea. Entonces, para resumir, el selector de padres es un atajo, por lo que no tienes que volver a escribir el selector una y otra vez cuando quieras usar cosas como pseudo clases o clases regulares. Mi D está en tu selector de padres. Debe usarse en conjunto con Dusty, porque el elector de padres simplemente reemplaza al ampersand en tu código con lo que sean los padres electores que estés anidado dentro del ampersy puede aparecer en cualquier lugar dentro de tu selector si es funciona con tu abrigo. Me gusta usar el selector de padres con pseudo clases porque me permite mantener esos estados alternos como cubrir y enfocar justo dentro de mis otras etiquetas, y se siente más organizado. 11. Importación: en esta lección, hablaremos de usar el en la importación con sass en la importación. Y SAS es muy similar al CSS regular en la importación, lo que le permite romper su CSS en múltiples archivos. El beneficio de usar sass, sin embargo, es que hará la importación cuando estés compilando o generando el código en tu CSS y lo pondrás todo en un solo archivo con una importación CSS. El navegador aún tiene que hacer múltiples peticiones http, que viene con un rendimiento It. Es similar a tener múltiples enlaces a múltiples archivos CSS en tu HTML, y esa tampoco es una gran idea. Para que tus múltiples archivos se compilen en un solo archivo, necesitas usar parciales. Un nombre de archivo parcial comienza con un guión bajo. Al principio, puedes usar en la importación sin parciales, pero usar parciales es mejor, ya que te dará ese único archivo CSS para la carga del dedo del pie del navegador. El sintaxis para la importación es simplemente en la importación y luego el nombre del archivo entre comillas. No es necesario mostrar el guión bajo en el nombre. Si se trata de un parcial, el compilador sabe buscar parciales así como archivos regulares con ese nombre en nuestro proyecto. Dividamos el archivo SAS en múltiples piezas para que sea más fácil encontrar cosas y administrar. En primer lugar, me gusta poner todo el código de reinicio en un solo archivo. De esa manera puedo reutilizarla fácilmente en otros proyectos. El único problema que tengo aquí es que el código base de reset está realmente en dos lugares porque estoy usando una variable aquí en el medio. No puedo usar una variable hasta que esté definida. Por lo que moví esta parte del código por debajo de la definición de variable. Entonces voy a mover esta línea que utiliza la variable hacia abajo a los estilos reales del sitio web, que en realidad es probablemente un lugar más apropiado. Ahora voy a crear un nuevo archivo llamado Underscore reset dot s CSS. Voy a sacar el código de restablecimiento de la parte superior y tirarlo al archivo parcial, y luego tiraré este código de restablecimiento adicional. Eso está por debajo de las definiciones de variables y ponlo ahí también. He guardado el archivo. Podemos ver que el nuevo archivo fue detectado, pero aún no ha detectado un cambio en el archivo SAS, por lo que no ha regenerado el CSS. No va a hacer eso hasta que guarde el archivo SAS principal. Por lo que volveré a su archivo principal y añadiré la declaración de importación. No tengo que usar el guión bajo, y no tengo que escribir el tipo de archivo. SAS buscará todos los archivos que terminan en CSS s CSS o incluso SAS el formato de archivo más antiguo. Ahora, cuando guardo este archivo, el estilo dot C s s se regenera y se sobreescribe. Si miramos el archivo CSS, no debería verse tan diferente. La única diferencia será la colocación de esa línea. Me moví, que establece el color base para la etiqueta del cuerpo. Ahora podemos poner las variables específicas de nuestro sitio y las de Nixon en su propio archivo. Llamaré a esta configuración. Ahora importaré este archivo y lo guardaré. Se detectó el cambio. Si miramos el sitio, todo sigue bien. A continuación, crearé un archivo para los estilos que pertenecen a todo el sitio y no son específicos de la página . Voy a llamar a este uno principal otra vez. Es parcial, por lo que empieza con un guión bajo. Me gusta esta técnica porque hace que sea muy fácil encontrar tus definiciones de variables y mezclar ins cuando quieras modificar el diseño. Si quiero cambiar algo, solo voy a configurar y puedo encontrar fácilmente las variables. Si cambio el color del acento a rojo, pesar de que solo estoy viendo el archivo SAS de estilo, detectará cambios a cualquier archivo que se haya importado para que podamos ver ese cambio aquí mismo . Y voy a deshacer eso. Ya que realmente no quiero rojo ahora, podría llevar esto más allá y configurarme en importación para cada una de las áreas específicas del sitio, tal vez una para la página principal uno para la página de video, el listado de categorías y así sucesivamente. Y en un sitio real. Probablemente habría más páginas que realmente encuentro tener tu código en múltiples archivos mucho más fácil que tener que desplazarse por un archivo realmente largo. Por lo que realmente me gusta la declaración de importación. lo final de lo que quiero hablar no está realmente relacionado con la declaración de importación, pero como usar import puede mejorar el tiempo de carga de tu sitio web al reducir el número de solicitudes http el tap espinal, tiene que ver con el rendimiento un oleaje . Es una buena idea siempre hombres si yo, tu CSS y JavaScript en tu sitio web de producción, así que quiero mostrarte una manera sencilla a los hombres si yo tu CSS al usar sass. Si nos fijamos en el CSS generado en este momento, podemos ver que no son los hombres ified su legible con mucho espacio en blanco agradable al desarrollar un sitio web. Quiero ver CSS así en caso de que necesite mirarlo. Pero una vez que esté listo para la producción, se debe modificar para que el archivo sea más pequeño y se descargue a los navegadores más rápidamente . Para hacer esto, simplemente necesitas agregar una opción a tu comando de reloj. Dejaré de mirar y tirarlo El último comando. Entonces voy a añadir un guión, estilo de guión comprimido. Esto hará que la salida se comprima. No va a regenerar el código hasta que cambie algo, así que solo agregaré una nueva línea aquí. Ahora, cuando miramos el CSS, todo está en línea sin espacios en blanco. El tamaño del archivo definitivamente será más pequeño, por lo que hemos completado todos los pasos para aprender los conceptos básicos de sass. En el último video, hablaré de cómo puedes seguir mejorando tus habilidades SAS y compartir algún buen recurso es 12. Qué sigue: Si ya has pasado por todos los videos procedimentales, deberías entender los conceptos básicos de SAS. La buena noticia es que conocer los conceptos básicos de SAS significa que realmente entiendes los conceptos básicos de cualquier preprocesador CSS. Si tienes la oportunidad de trabajar en un proyecto usando, digamos, Leszcz en el futuro, no tendrás ningún problema en recogerlo, probablemente en solo unos minutos. La sintaxis será ligeramente diferente, pero los conceptos son todos similares. No te he enseñado hasta lo último de sass en este curso. Mi objetivo era ponerte en marcha con los conceptos más útiles, y superarte cualquier miedo o temor que pudieras tener sobre tener que aprender otro idioma o marco. Una vez que te sientas cómodo con lo que he enseñado aquí, si quieres llevar un poco más allá tu aprendizaje y habilidades, puedes investigar el concepto de usar matemáticas y funciones, Y SAS SAS viene con una serie de funciones integradas que tú puede usar en tu código. Muchos de estos se pueden utilizar para trabajar con color, como aclarar u oscurecer. Podrían ser utilizados en una mezcla para ingrediente. Por ejemplo, también hay funciones que pueden ayudarte a crear sitios web receptivos mediante el uso de matemáticas. También es posible crear tus propias funciones. También recomiendo simplemente leer la documentación completa de SAS. Eso también lo puedes encontrar en el sitio web de SAS. Si quieres algunas ideas sobre cómo incorporar SAS a tu flujo de trabajo, te recomiendo ver este video de Nathan Henderson en Sass y Compass. Son sólo 16 minutos, y es una buena revisión de los conceptos que aquí se enseñan, con algunas ideas adicionales presentadas. Hice todo en este curso a la antigua manera, usando la línea de comando. Creo que es bueno aprender nuevas herramientas en el formato más básico para que realmente entiendas lo que está pasando. Pero una vez que tienes esa base, creo que usar algunas de las herramientas que facilitan las cosas está bien. Estas son algunas herramientas que tal vez quieras explorar Scout, que confinaste aquí kit de código, que es para Max on Lee. Pero es útil para mucho más que solo SAS y pre press, un nuevo proyecto de código abierto que funciona en Windows y se supone que es similar al kit de código . Tendrás que asegurarte de que tu editor de texto pueda manejar los corchetes de extensión de archivo CSS de punto s sabe que dot s CSS estará usando el CSS en impuestos en su mayor parte, y lo maneja. De acuerdo, pero muchos editores de texto pueden manejarlo aún mejor. Y confinaste enchufes o extensiones para obtener un mejor código, finalización y más. Haz alguna investigación para asegurarte de que tu editor de elección esté configurado de la mejor manera posible para sass. Probablemente no se configurará correctamente en una nueva instalación, pero vale la pena el tiempo para asegurarte de que tu editor te ayude a codificar eficientemente. Ya he mencionado a Brújula unas cuantas veces de paso. Compass es un marco de creación de CSS que utiliza sass. Viene con mucha mezcla de ins construidos para CSS tres propiedades, tipografía y mucho más. Para que no tengas que construir estos desde cero tú mismo. También cuenta con herramientas para crear sprites de imagen y crear el CSS adecuado para ellos. Hay mucho que aprender con brújula, y puede que trate de hacer un curso con ella en el futuro. Cuando tengo tiempo, es muy útil, y cuando quieres llevar tus habilidades SAS al siguiente nivel. Te recomiendo explorar Compass. Impartí esta clase convirtiendo un proyecto existente a sass de CSS regular. A mí me gusta este enfoque para aprender sass, porque se puede comparar el Sasko para vernos, y se puede hacer la conversión y pequeños pasos. Te recomiendo que intentes convertir uno de tus sitios a usar sass para asegurarte de que entiendes todos los conceptos. Esto no te ahorrará tiempo al principio, pero cuando quieras cambiar el sitio más adelante, vas a tener una gran base para cambios rápidos. Si usas culo en el siguiente sitio que desarrolles, podrás escribir tu código más rápidamente, y será mucho más fácil de mantener. Recuerda, puedes escoger y elegir qué partes de sass quieres usar. El CSS regular es un código SAS válido, así que usa las partes que te gusten, y a medida que pasa el tiempo, puedes aprender e incorporar más ideas para construir sitios web más rápido. Gracias por ver este curso. Espero que te haya ayudado a recoger una más de las muchas habilidades necesarias para hacer desarrollo Web . Creo que esas pocas horas perdieron el aprendizaje. Una nueva habilidad como sass se recuperará muy rápidamente porque podrás desarrollarte mucho más rápido en el futuro. Espero que haya disfrutado el curso. Si tiene alguna pregunta, por favor pregunte y trataré de ayudar.