Domina SASS: guía completa para preprocesadores de CSS

1. Introducción del curso: ¿Hace mucho tiempo que usas CSS y quieres llevar tus habilidades a un nivel superior? Es posible que hayas hecho un curso de diseño de onda, pero aún no has entendido completamente CSS. En tu caso, esta es la solución para ti. Hola. Mi nombre es John Shocker Una vez más, estoy de vuelta con un nuevo emocionante y en este curso, vamos a aprender SAS desde muy principio para avanzar. SAS significa hojas de estilo sintácticamente impresionantes. Se trata de un preprocesador CSS. En los tiempos modernos, si quieres ser un desarrollador web front-end, entonces deberías tener conocimiento de cualquier preprocesador CSS, sin duda CAS es el lenguaje de extensión CSS de grado profesional más maduro, estable y potente del mundo Como te dije, voy a cubrir todo lo relacionado con SAS en esta serie de tutoriales. Al principio, te voy a dar una introducción en profundidad de CAS, y luego vamos a aprender cómo podemos instalar el compilador CS Vamos a cubrir variables, anidamiento, parciales e importaciones, mezcla, extender operadores, funciones, directips condicionales y bucles Este curso te dará los conocimientos que estás buscando. Estamos listos para irnos. Empecemos. 2. ¿Qué es Sass?: Hola, chicos. Bienvenida de nuevo. En este tutorial, te voy a presentar ¿qué es SAS? ¿Por qué necesitamos usar SAS? ¿Y cómo podemos usar CAS? Nuestra primera pregunta es, ¿qué es SAS? SAS significa hojas de estilo sintácticamente impresionantes. Se trata básicamente de una extensión CSS. Haremos el mismo trabajo en el archivo CAS. Como hacemos en el archivo CSS. De lo contrario, podemos llamarlo preprocesador CSS. Hoy en día, es muy necesario que tengas conocimiento de cualquier preprocesador CSS Hay dos famosos preprocesadores CSS, SAS y menos. Como comparar s, SAS es más popular porque los SS vienen con una característica más avanzada que menos. Si completas este curso, quiero decir si aprendes CS entonces automáticamente, puedes entender menos. Solo necesitas enfrentar poca diferencia de sintaxis, nada más. Ahora la pregunta es, como te dije antes, se trabaja como CSS. Entonces, ¿por qué CS es más popular que CSS? Porque hay algunas razones. Déjame mostrarte. En primer lugar, es muy fácil de manejar. Cuando trabajamos con CSS, crea archivos muy largos. A veces es muy difícil manejar archivos largos. Pero si hablamos de SAS, es muy fácil de administrar. La siguiente razón que lo hizo más popular, aumenta nuestra velocidad de codificación en comparación con CSS normal. Pero es efectivo con cuando se trabaja con proyectos grandes, no con los proyectos pequeños. No es muy útil con proyectos pequeños. Supongamos que desea crear un sitio web de cinco páginas. En ese caso, no es muy útil. Pero si trabajas con un sitio web complejo y de varias páginas, entonces es muy útil. Lo último que lo hizo más popular, que es la compatibilidad entre navegadores. Cuando usas CSS, algunas características no son compatibles con el navegador antiguo. A veces crea algún gran problema, pero no hay problema con SAS por su característica incorporada, es trabajo con cualquier navegador antiguo Supongamos que si trabajas con Internet Explorer siete, de lo contrario, si trabajas con letras versión del navegador Chrome, entonces no puedes ver ninguna diferencia en la salida. Es trabajo de la misma manera que funciona en la versión letras. Ahora veamos cómo podemos usar el archivo CS en nuestro archivo STL. Lo extraño es que no podemos usar el archivo CS en un sml. Sí, es verdad. No podemos usar el archivo CS directamente en Atmel. Incluso el navegador no puede entender el código SAS. El navegador solo puede entender los archivos CSS, no el archivo CS. Entonces por qué necesitamos crear un archivo CS, necesitamos un compilador compilador SAS Compila el archivo CS y lo convierte en archivo CSS. Por lo tanto, necesita indect el archivo CSS en su documento ETL, no en el Pero necesitas escribir tu código en el archivo CAS, no en el archivo CSS. Después compilas el código SAS y lo conviertes en archivo CSS. Ahora la pregunta es, ¿qué es el compilador SAS? En el siguiente video, sabremos qué es el compilador de Cs. Ahora, hablemos de características OSS, y vamos a cubrir estas características en nuestros próximos tutoriales. Nuestra primera característica son las variables. Podemos almacenar valor en variables como lenguaje de programación. Nuestra segunda característica es el anidamiento. Usando el anidamiento, podemos asignar una clase a otra clase. De lo contrario, podemos usar una clase en otro ID. Este es un caso de uso de anidación. Nuestra siguiente característica es parcial y entradas. Podemos crear un archivo cs pequeño y podemos importarlo como módulos. Nuestra cuarta característica son las vixens. Usando mixins, puedes reutilizar tu código varias veces. Nuestra quinta característica es extiende. Supongamos que escribe algún código en una clase, pero quiere reutilizar estos códigos en otra clase. En ese caso, se puede utilizar extiende. Nuestra siguiente característica son los operadores. Operador significa operadores aritméticos. Si necesitas ejecutar algún cálculo, en ese caso, puedes usar estas características como suma, multiplicación, división, etcétera Nuestra siguiente característica son las funciones. Nuestro SAS viene con algunas funciones veladas, y usted puede usar estas funciones Como puedes crear tus propias funciones como lenguaje de programación. Entonces nuestra segunda última característica son las directivas condicionales. Si quieres ejecutar algún trabajo condicional como Is condition, entonces puedes usar esta función, y nuestra última característica es loops. Sé que ya estás familiarizado con JavaScript y otros lenguajes de programación. Entonces no necesito explicar qué son bucles y cuál es el uso de los bucles. Puedes usar cualquier tipo de bucle como four loop, Di loop, while loop, etcétera Todos estos están disponibles en SAS. Ahora hablemos de sintaxis SAS. Básicamente, CSR vino con dos tipos de sintaxis, sintaxis SCSS y sintaxis SASS Estas son básicamente extensiones. SCS SAS. Básicamente, están dentro, pero hay una diferencia menor. Supongamos que tenemos una sintaxis CSS. Y como puede ver, tomamos total tres tipos diferentes de selectores NeBuL Nb AI y Neb Como puedes ver, primero, necesitamos escribir los valores CSS de neBuL. Entonces necesitamos escribir Nb AI valor CSS. Por fin, es necesario escribir los valores CSS de anclaje de Neb. Pero si necesitamos usar el mismo código en la sintaxis SCSS en ese caso, necesitamos escribir así Necesitamos seleccionar el elemento Nab de un tipo. Entonces dentro del alivss necesitamos escribir toda la sintaxis, UL, LI y A. Básicamente, llamamos a este sistema Vamos a conocer más sobre ello en nuestros próximos tutoriales. Pero si escribe la sintaxis de la celda en el código SAS, entonces necesita escribir así. No es necesario usar ningún calivrass ni ningún punto y coma. No es necesario usar ningún punto y coma después de una propiedad. Es bastante similar con el lenguaje de programación Python. Pero para este tutorial, voy a usar la sintaxis SCSS, esta De lo contrario, puede confundirte. Ahora, hablemos de qué tipo de conocimiento necesitas para iniciar su. Para CAS, debes tener conocimientos básicos de STML y debes tener buenos conocimientos de CSS Como te dije antes, en última instancia, archivo CS compilado en un archivo CSS. Por lo que debes tener conocimiento de la sintaxis CSS adecuada. Y si hablo de codditor, puedes usar Para este tutorial, voy a usar código VS. Puedes usar cualquier editor de bacalao. Entonces esto es todo para este tutorial. En el siguiente tutorial, voy a hablar sobre qué es compilador CAS y qué compilador vamos a utilizar para este Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 3. Descarga e instala el compilador de sass: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender qué es compilador SAS y cómo podemos descargar el compilador SAS, que puede ayudar a compilar nuestro archivo CS en un archivo CSS Como pueden ver en mi navegador, abro el sitio web oficial de SAS, guión SAS lang.com Como puede ver, proporciona alguna introducción básica de SAS. Si tienes tiempo, entonces puedes leerlo. A continuación, aquí puedes ver un nombre de opción Instalar. Simplemente haga clic en. Entonces se redirige a esta página. Si te desplazas un poco hacia abajo, aquí puedes ver a otro método. Aquí puedes ver una lista de compiladores, y aquí puedes ver otro método que puedes instalar tu SAS usando NPM Para este tutorial, no voy a usar ningún paquete de nodos. Me gustaría ir con compilador, y voy a usar un compilador diferente, no este, y nuestro nombre de compilador Como puedes ver, estos son la mayoría de compiladores pagados. Por eso voy a usar un compilador gratuito, que es Koala Solo necesitas buscar el compilador Koala SS en tu navegador, y luego debes dar click sobre este enlace, Este es el sitio web oficial de este compilador. Como puedes ver, Koala es una aplicación GUI para como SAS Compass y CoffeeScript Lo usamos con fines de compilación para estos lenguajes, y sabes que todos estos son lenguajes de preprocesador Básicamente, usando esta aplicación, podemos compilar todos estos lenguajes. Al principio, necesitamos descargar esta aplicación. Para descargar, es necesario hacer clic en este botón verde, Descargar. Como puedes ver, ya empieza nuestra descarga. Y a continuación, necesitas abrir tu carpeta de descargas, y aquí puedes ver la configuración de esta aplicación, configuración de Koala Ahora voy a instalar esta aplicación en mi computadora. El proceso de instalación es muy sencillo, necesario hacer doble clic sobre él. Después de eso, debes hacer clic en siguiente, y luego puedes elegir tu directorio donde quieres instalarlo. Esta es la ubicación predeterminada, simplemente haga clic en siguiente. Como puedes ver, ya instalé esta aplicación, así que no quiero volver a instalarla, pero necesitas completar tu proceso de instalación. Puede tardar dos o tres minutos completar el proceso de instalación, y después de completar el proceso de instalación, se abre automáticamente. Por ahora, voy a cancelarlo. Entonces, después de completar el proceso de instalación, debe hacer clic en el icono de Koala para abrirlo. Sólo en doble clic sobre él. Como puedes ver, la primera vez está totalmente vacía. Y a partir de este punto, puede agregar cualquier archivo SAS o un archivo is. Al principio, voy a saltar a mi editor y crear un archivo CS. Como puedes ver, hay una carpeta Nam Demo, y dentro de esta carpeta Devo, hay otra carpeta Nam CSS Y dentro de esta carpeta CSS, voy a crear un archivo CS. Vamos a crear un nuevo archivo dentro de esta carpeta. Estilo punto SCSS. De lo contrario, también se puede utilizar la sintaxis de SASS. Pero como te dije antes, para este tutorial, voy a usar sintaxis SSS También puedes ver el ícono de SAS en este lugar. Ahora, agreguemos algo de código SAS en este documento. Ya copio algún código SAS y lo voy a pegar aquí. Este código es para fines de demostración, por lo que no es necesario entenderlo. Del siguiente video, voy a hablar de ello. Como puede ver, creamos nuestro archivo CS con éxito. Ahora, necesitamos crear un archivo CSS en la misma carpeta con el mismo nombre. Voy a crear un archivo CSS en esta carpeta, estilo punto CSS. Eso es. Y tenemos que mantener este archivo vacío. No necesitamos escribir ningún código CSS en este archivo. Tenemos que dejarlo en blanco, y ahora necesitamos abrir nuestro KoalaOptare Voy a abrir nuestro KoalaOptare. Entonces como pueden ver, lado a lado, abro mi Qarafopter y mi Y aquí se pueden ver dos archivos diferentes como archivo y un archivo CSS. Y ahora necesitamos mover esta carpeta CSS en esta aplicación. Simplemente voy a arrastrar esta carpeta y colocarla aquí. Esto es. Aquí se puede ver automáticamente pico todo el archivo CSS y los archivos CS. Ahora voy a volver a nuestro editor de código y voy a hacer algunos cambios en nuestro archivo CS. Aquí puedes ver en mi editor, abro mi archivo CS. Con eso, también abro mi archivo CSS. Si te muestro mi archivo CSS, como puedes ver, ahora está totalmente vacío. Ahora voy a volver al archivo CS y voy a configurar este archivo, control. Entonces si configuro este archivo y te muestro mi archivo CSS, aquí puedes ver el código CSS adecuado. Así que esta aplicación Kana compila el código SAS y lo convierte en un código CSS Aquí puedes ver con la etiqueta Nap, selecciona UltaGo pero en nuestro archivo CS, dentro de la etiqueta Nap, usamos etiqueta UL Como puedes ver en nuestro archivo CS, usamos Napkword una vez Pero si te muestro archivo CSS, aquí puedes verlo usó etiqueta Nap tres veces con etiqueta UL con etiqueta LI con etiqueta ANCA. Ahora hagamos algunos cambios en nuestro archivo CS y veamos qué pasó. Entonces aquí quiero aumentar UL paddy 20 pixel, tipo verano, 20 pixel Si configuro este archivo y te muestro mi archivo CSS, aquí puedes ver que nuestros cambios se reflejan correctamente en el archivo CSS. Solo necesitas recordar que no necesitas cambiar nada en tu archivo CSS. La mejor opción es cerrar su archivo CSS y luego simplemente trabajar con el archivo CS. Espero que ahora te quede claro cómo funcionan los compiladores CS. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 4. Tutorial de variables de Sass: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender variables SAS. Pero al principio, intentemos entender qué son las variables y por qué deberíamos usar variables. Aquí puedes ver que creamos un selector de body tag. Dentro de este selector, establecemos el color de fondo, rojo y la familia de fuentes aéreas. Con eso, voy a tomar otros dos selectores H un selector y Spenselector Ahora bien, si te das cuenta, puedes ver que hay algo común. Son colores, color rojo. Para el cuerpo, uso el color de fondo rojo, y para cada etiqueta, uso el color de fuente rojo, y también uso el mismo color para la etiqueta span. Como puedes ver, el rojo es el color común. Supongamos que hemos usado el mismo color en diez lugares. Y ahora necesitamos cambiar el color. Entonces tenemos que ir diez lugares para cambiar el color, y lleva mucho tiempo. Para ello, sus introducen variables. En las variables, tomamos nombre por un valor. En nuestro caso, color rojo, y nuestro nombre de variable es el color primario del guión. Y debes recordar o el nombre de la variable, necesitas usar signo de dólar. Al principio, necesitamos tomar un nombre de variable, luego necesitamos almacenar valor en esta variable. A continuación, necesitamos deprimir el nombre del color con este nombre de variable El principal beneficio al usar la variable es cuando necesitamos cambiar el color primario. Supongamos que quiero cambiar el color primario rojo a azul. Entonces solo necesitamos hacer cambios en las variables, no en todos los selectores No necesitamos escribir nombre de color azul en los lugares. Solo necesitas hacer cambios en la variable. Esta característica también se introduce en CSS, pero los navegadores antiguos no admiten la función CSS. Pero SAS podría. Sin perder el tiempo, comencemos la práctica y veamos cómo funcionan las variables en SAS. Aquí puedes ver lado a lado, abro mi Visual Studio Ceaor y mi navegador y ya puedes ver, creo un layout básico de página web Aquí puedes ver el encabezado, un estiércol, una barra lateral, y también puedes ver la parte de contenido y un pie de página. Si notas puedes ver, hay un color común en esta página web encabezado y pie de página. Si pongo el cursor sobre estos enlaces, se puede ver el mismo color, fondo de esta etiqueta de anclaje Además si pongo el cursor sobre mis artículos de sideware, se puede ver el mismo color color marrón No solo eso, si selecciono todo el contenido, puedes ver el mismo color de fondo detrás del contenido. Ahora les voy a mostrar cómo podemos usar variables. Entonces como puedes ver, nuestro color primario es el marrón, por lo que necesitamos encontrar el color marrón. Aquí puedes ver el nombre del color marrón. Usamos este color en Anchor hover, encabezado, sección de pie de página, mucho de esto Ahora quiero reemplazar este valor de color con la extremidad variable. Para eso, necesitamos crear una variable. Entonces aquí, voy a crear una variable. Al principio, necesitamos usar signo de dólar, dólar y nuestra extremidad variable es el color principal. Color mínimo. Voy a usar el color marrón. Ahora voy a sustituir los nombres de color por el nombre de la variable, color principal. Entonces primero, voy a sustituir la barra superior Anchor Hover selector, color o nombre de variable También lo voy a sustituir en selector de cabecera, color principal. Después en nuestro elemento de lista de menú. A continuación, quiero reemplazarlo en nuestra sección de contenido. Y también voy a reemplazarlo en nuestra barra lateral. A continuación, voy a reemplazarlo en nuestra sección de pie de página. Entonces ya está hecho. Si configuro este archivo y vuelvo a cargar mi navegador, y se puede ver que no hay cambios Se puede ver el mismo color de encabezado, mismo color de pie de página, y si ober mi más lindo en mis enlaces de menú, se puede ver el color y si ober mi más lindo en mis enlaces de menú, de fondo . También es marrón. Reemplacé con éxito nuestro valor de color con una variable. Ahora, quiero cambiar el color principal de este sitio web, marrón a azul. Cuando Hbar mi cursor en los elementos del menú, quiero azul brdrown Básicamente, quiero decir que quiero cambiar el color principal, del marrón al azul. Voy a escribir pelo azul. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Puedes ver el color azul en la sección de encabezado, sección pie de página, sección de menú y sección de barra lateral también. Ahora no necesitamos cambiar el color varias veces porque ahora usamos variable. Ahora puedes poner cualquier color por una vez, y va a reflejarlo todas las páginas. Este es el beneficio de usar variables. Solo necesitas usar el nombre de la variable como valor. Ahora si te muestro mi archivo CSS, aquí puedes ver que no hay variables. Apenas se pueden ver los nombres de los colores, fondo azul. No es sólo trabajar con colores. Se puede poner cualquier tipo de valor en variable. Supongamos que quiero cambiar el estilo de fuente en toda la página web. En ese caso, podemos usar variable. Voy a crear otra variable, y nuestro nombre de variable es fuente principal, Dollar, fuente principal. Colón. Por ahora, voy a usar aerial y ahora voy a reemplazar todo el valor de la fuente con esta variable. Voy a reemplazar la fuente Aerial con esta variable, fuente principal. Y también necesitamos reemplazar en selector de cabecera, fuente principal. Por fin, voy a reemplazarlo en nuestro encabezado de contenido. Fuente Min. Si configuro este archivo y vuelvo a cargar mi navegador, como puede ver, no hay cambios. Funcionó perfectamente. Se puede ver que imprime una fuente real en toda la página web. Ahora bien, si necesitamos cambiar la familia de fuentes, entonces tenemos que cambiarla varias veces. Ahora, cambiemos la familia de fuentes por toda la página web, y voy a usar qué que una fuente. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el estilo de fuente Como puedes ver, reemplaza la fuente Areal con VardanaFont. Ahora está claro para ti, ¿cuál es el uskase de variable en sas No sólo nos ahorra tiempo, también mejora nuestra productividad. Podemos cambiar miles de lugares cambiando un solo lugar. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 5. Tutorial de nido de sass: Hola, chicos. Bienvenido de nuevo. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS y en este tutorial, vamos a aprender SAS nesting Aquí puedes ver tres selectores diferentes. Como pueden ver en nuestro primer selector, utilizo etiqueta Nap con etiqueta UL, y en nuestro segundo selector, uso naptag con etiqueta Ali, y en nuestro último selector, usamos etiqueta Nap con etiqueta ancla ¿Qué es lo común entre estos tres? Que es la etiqueta Nap. Como puede ver, si usamos la sintaxis SS, entonces necesitamos usar la etiqueta Nap tres veces. Pero si escribimos el mismo código en SAS, entonces necesitamos escribir así y llamamos a este método nesting Aquí puedes ver, al principio, iniciamos la etiqueta Nap, luego dentro del Caliss diseñamos todos estos selectores Seleccionará nuestro selector Ali selector de anclaje. Si usamos anidamiento, entonces no necesitamos escribir la palabra clave dep tres veces y dentro de los Liverss necesitamos seleccionar todos los demás selectores Que se relaciona con naptag. Pero cuando configuro el archivo CS, va a devolver este tipo de código CSS. Va a reducir algún código de alineación, pero va a devolver el mismo resultado Por último, sin perder el tiempo, estudiemos lo práctico y veamos cómo funciona. Entonces aquí se puede ver lado a lado, abro mi creador de tornillos visuales y mi navegador y ya creo un layout web básico. Y en mi visual studio Cdiator puedes ver IOPent 35, nuestro documento de estimación nuestro archivo CS y nuestro archivo CSS Sabes, utilizo este layout en nuestro tutorial anterior, puedes ver las variables que creo en nuestro tutorial anterior. Pero en este trato de estudio, vamos a aprender cómo podemos usar el anidamiento Pero al principio, necesitamos encontrar la posición donde podamos usar el anidamiento Voy a desplazarme un poco hacia abajo. Aquí puedes ver el selector de Br superior. Como puede ver, después del selector superior de Br, utilizamos la barra superior con UL, UL Li, etiqueta de anclaje y Hover Esta es la rectitud para usar el método de anidación. Al principio, voy a copiar el CSS UL. Copia, y luego lo voy a pegar dentro del selector Tobar porque tobr es la etiqueta común para Ahora bien, este selector no es necesario, así que lo voy a quitar. A continuación, se puede ver dentro de la etiqueta UL, hay etiqueta LI. Como pueden ver, ya uso la etiqueta UL dentro de la sección de la barra superior. Ahora voy a copiar solo el selector de IA de esta posición a esta posición. Copia. Voy a pegarlo dentro de la etiqueta UL. Al principio, nuestro selector tobr y dentro del selector tobr, pongo selector UL, y luego dentro del selector UL, pongo selector AI Ahora no necesito este selector de tesis, así que voy a quitar. Y ahora puedes ver dentro del selector Tobar, tenemos etiqueta de anclaje Ahora voy a copiar solo el selector de etiquetas de anclaje, y lo voy a pegar fuera de la etiqueta UL. Voy a quitar este código. Ya no necesito esto. Ahora puedes ver un selector de Hobart Es un selector Hober de anclaje, no el selector TBarhber no el selector TBarhber Voy a copiar este selector de Hobart, y lo voy a usar dentro la etiqueta nga en esa posición. Voy a quitar esta. Y ahora quiero decirte algo nuevo. Como puedes ver, dentro de la etiqueta ancla, creamos la etiqueta Anchor Hobert Por lo que no es necesario volver a usar la etiqueta de anclaje para que podamos quitar la etiqueta Anca. Aquí podemos usar signo de persona, algo así. Es decir que usamos este efecto Her con la etiqueta padre. Se va a crear la etiqueta Her de la etiqueta de su padre. Si configuro este archivo y refresco mi navegador, aquí puedes ver que no hay cambios. Es el trabajo tal como es. A este método lo llamamos anidación. De igual manera, vamos a seguir el mismo proceso para la sección de encabezado. Voy a copiar la etiqueta H one y la voy a pegar dentro de la etiqueta encabezada. Voy a quitar esta. Como voy a seguir el mismo proceso para la sección de menú. Al principio, voy a copiar la parte UL de este menú y pegarla dentro de la sección de menú, voy a quitar la vieja. Y luego voy a copiar la parte AI de este menú y la voy a pegar dentro de la sección de menú. Y luego voy a quitar esta. Nuestro siguiente seleccionado es el selector de anclaje, que está dentro del selector LI. Entonces voy a copiar la etiqueta ancla, y la voy a pegar dentro de la etiqueta LI. Y luego voy a quitar esta. Y nuestro siguiente seleccionado es la etiqueta Anchor Hobart. Entonces voy a copiar este selector. Entonces como pueden ver, es la etiqueta ancla Hobart, así que tenemos que pegarla dentro de la etiqueta de anclaje Y luego tenemos que quitar la etiqueta de aire, y podemos usar persona aquí. Por ahora, esta es inútil, así que quiero quitarla. Así que básicamente, es crear nuestro código CSS muy manejable. Si configuro este archivo y vuelvo a cargar mi navegador, como puede ver, no hay cambios Y ahora no necesitamos usar este selector de menú varias veces. Y a continuación, voy a seguir el proceso de anidación para nuestra sección de contenido Entonces al principio, voy a copiar el selector s dos. Entonces lo voy a pegar dentro de la sección de contenido, voy a quitar esta. A continuación, se puede ver un pseudoselector llamado selección. Puedes ver que usamos esta selección toda la sección de contenido, voy a copiar solo el pseudo selector Voy a pegarlo dentro de la sección de contenido, no en la sección ST. Y luego lo voy a quitar. Como saben, para pseudo selector, necesitamos usar signo de persona, así que voy a escribir persona aquí Si guardo este archivo y vuelvo a cargar mi navegador, puedes ver que no hay cambios Espero que ahora te quede claro qué es anidación y cómo podemos usar la anidación Gracias por ver este video. Estén atentos para nuestro próximo estudio. 6. Tutorial de parciales e importaciones de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender qué es parcial e importaciones. Entonces, al principio, centrémonos en lo parcial. Parcial significa partes. Quiero decir partes de SS bien. Supongamos que tenemos un archivo CS y nuestro archivo es el archivo CS de punto principal, y este es nuestro archivo principal. Y como sabes, si creamos un sitio web, nuestro sitio web dividido por encabezado, contenido, sideware y footer, a veces necesitamos crear diferentes diseños para diferentes páginas Pero el problema es, ¿cuando escribimos todo el código en un solo archivo? Crea nuestro archivo muy pesado y desordenado. Necesitamos desplazarnos hacia arriba y hacia abajo en nuestra página varias veces. Entonces, para resolver este problema, separamos nuestro diseño. Para encabezado, creamos archivo de encabezado para contenido, creamos un archivo diferente para barra lateral y para pie de página. Si trabajamos con variables, también creamos otro archivo para variables. Básicamente, es organizar nuestro código y reducir la torpeza Supongamos que completamos el estilo de sección de encabezado, entonces necesitamos abrirlo de nuevo. Podemos abrir la parte especificada. ¿Por qué necesitamos cambiar? Este es el concepto de parcial. Ahora hablemos de importaciones. Después de crear las diferentes partes, necesitamos ingresar estas partes en nuestro archivo principal. Para eso, necesitamos usar una palabra clave especial, input. En la entrada de tasa, necesitamos escribir el encabezado del nombre del archivo. Una cosa importante que debes recordar. Es necesario crear este mismo archivo de extensión. Quiero decir archivo CS, no archivo CSS. No se puede introducir el archivo CSS en el archivo principal. Obviamente, es necesario crear el archivo CS. Y otra cosa que debes recordar cuando creas tu archivo separado, necesitas usar undersco antes Quiero decir underscohader punto SCSS. Nuestro signo de subrayado reconoce que este no es el archivo principal, por lo que nuestro compilador CS identifica con éxito este es un archivo parcial y necesitamos incluirlo en nuestro archivo principal Por eso no necesitamos un archivo CSS separado para archivos parciales. Si usa la sintaxis SASS, entonces para su archivo parcial, también, necesita usar la sintaxis SASS Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usar parciales y entradas. Como pueden ver, ya abro mi aplicación KOA, y abro nuestra carpeta CSS en esta aplicación. Con eso, también abro el editor de código de Visual Studio. Como puedes ver, este es nuestro Min CSF, style dot Sss. Y ahora voy a dividir este archivo con pas. Al principio, voy a comenzar con estas variables. Quiero crear un archivo CS separado para nuestras variables. Al principio, voy a crear un nuevo archivo en nuestra carpeta CSS. Y nuestro nombre de archivo son variables. Como te dije antes, para crear un archivo parcial, necesitamos usar variables underscosge undersco Punto, nuestra extensión es C es es, entonces voy a presionar Enter. Como pueden ver, soló nuestro archivo, y luego voy a cortar mis variables de este archivo, y lo voy a pegar dentro del archivo de variables Y lo voy a quitar de nuestro archivo principal. Entonces primero, voy a guardar este archivo. Entonces necesitamos incluir este archivo en nuestro archivo de estilo. Para eso, primero, necesitamos escribir en el letrero rojo, y luego tenemos que escribir Importar. Importar dentro de los códigos dobles. Necesitamos escribir el nombre del archivo, pero no necesitamos usar UnderscoSign, necesitamos escribir variables No es necesario mencionar la extensión de archivo. Nuestro compilador es lo suficientemente inteligente como para entender la extensión del archivo, y luego necesitas usar punto y coma para finalizar esta línea A continuación, voy a crear un nuevo archivo para nuestra sección de encabezado. Entonces voy a escribir undersco header. Ss entonces voy a presionar Enter. Como pueden ver, creó un nuevo archivo, y ahora quiero separar nuestra sección de encabezado. Para eso, voy a seleccionar de la barra superior. Desde la sección superior de la barra, quiero copiar nuestro encabezado, también el menú. Voy a cortar, y voy a pegarlo dentro del archivo de cabecera. Eso es. Para nuestra parte de encabezado, seleccionamos la sección de encabezado Tobb, también la sección de menú Y luego necesitamos importar el archivo en nuestro archivo principal, que es style dot Sss Voy a escribir en el rojo, Importar luego dentro del doble curso, necesitamos escribir el nombre del archivo, que es encabezado, luego semiconm dos en esta línea Ahora, para nuestra sección de contenido, voy a crear otro archivo. Dentro de la carpeta CSS, voy a crear undersco content SCS, y luego voy a presionar Enter Como puedes ver, crea un nuevo archivo. Después vuelvo a mi archivo SSS de estilo, y voy a cortar esta parte de contenido Y lo voy a pegar dentro del archivo content dot SCSS Voy a configurar este archivo también. De manera similar, necesitamos ingresar este archivo en nuestro archivo principal. Entonces voy a duplicar esta línea y aquí voy a escribir contener. Y a continuación, necesitamos crear un archivo para nuestra sección de guerras secundarias. Voy a crear un nuevo archivo en nuestra carpeta CSS. Underscoe barra lateral Sss. Como puedes ver, creamos un nuevo archivo para nuestra barra lateral y luego necesitamos cortar la sección sidewar del archivo CSS de estilo Voy a cortar esta sección de lados de este archivo. Y voy a pegarlo dentro de este archivo Sidewd. Y luego voy a poner este archivo. Ahora necesitamos ingresar este archivo en nuestro archivo de estilo. Voy a comenzar esta línea, y aquí voy a escribir por fin tarjeta lateral, voy a crear un nuevo archivo para nuestra sección de pie Entonces dentro de esta carpeta ***, una vez más, voy a crear un nuevo archivo, UnderScoefter, En este archivo, quiero darle estilo a nuestra parte de pie de página. Voy a cortar esta parte la pego dentro de la sección de pie de página. Entonces voy a configurar este archivo. Como voy a volver a nuestro archivo principal, archivo CS estilo. Ahora necesito ingresar la sección de pie de página en nuestro archivo principal. Así que duplica esta línea y aquí voy a escribir footer. Voy a establecer este archivo. Por fin, se puede ver la sección de consulta de medios. Lo usamos con fines responsivos. Si quieres separar esta parte, sí, puedes. Vamos a crear otro archivo para la sección media queries. Dentro de esta carpeta ***, voy a crear otra carpeta. Voy a crear un archivo undersco media. Dot SCs entonces voy a presionar Enter. Entonces voy a cortar la sección media query y voy a pegarla dentro de este archivo multimedia. Voy a fijar esta . Como saben, necesitamos ingresar este archivo en nuestro archivo principal. Voy a duplicar esta línea aquí voy a escribir nuestra línea fina, que es media. Y voy a presionar Control S para configurar este archivo. Usando técnica parcial, separamos con éxito nuestro diseño web. Separamos nuestra sección de encabezado, sección contenido, sección de barra lateral, sección de pie de página, también las consultas de medios y las variables. Es la torpeza de radios de nuestro sitio web. Si abro mi archivo SML, déjame mostrarte. Como puede ver, este es nuestro diseño TML. Vamos a recargar el archivo. Como puede ver, no hay cambios. Es L como es. Ahora suponga que desea cambiar el color de fondo de encabezado y pie de página. En ese caso, es necesario abrir el archivo de variables. Y a partir de aquí, puedes cambiar tu color principal. Quiero un poco de color verde, algo así. Si me siento esta pila y luego vuelvo al navegador y vuelvo a cargar mi navegador, aquí puedes ver el resultado Cambió nuestro color principal. Si te muestro mi archivo CSS, déjame mostrarte estilo punto CSS. Aquí puedes verlo seguir la secuencia de nuestros archivos de entrada. Al principio Tpbard, luego viene encabezado, luego viene contenido, y luego viene barra lateral Atlas pie de página, y luego nuestra consulta de medios Después de la consulta de medios, como puedes ver, nuestro cuerpo seleccionado y nuestro rapero seleccionado. Si te muestro el archivo SAS de estilo, puedes seguir la secuencia. Primero, nuestras variables, encabezado contiene barra lateral pie de página media query, y como puedes ver, nuestra sección de cuerpo y nuestra sección de rapero. Espero ahora quede claro para ustedes lo que es parcial y las importaciones. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 7. Tutorial de Sass Mixins: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva característica de Vlated SAS En este tutorial, vamos a aprender vixens es una característica muy útil Supongamos que tenemos dos clases diferentes, clase uno y la clase dos. Como pueden ver, utilizo propiedad de radio botter, ambas clases Para la clase uno, uso radio de boder de cinco píxeles, y para la clase dos, uso radio de borde de diez píxeles Para que puedan ver, utilizo propiedad similar tanto las clases. Su propiedad es la misma, pero su valor es diferente. Para nuestro viejo rowser Chrome utilizamos radio Ber con webkit, y para nuestros viejos brrowsers Mozilla usamos Entonces es un método CSS simple. Pero el problema es si necesitamos usar las propiedades similares diez veces, ¿entonces qué? Entonces necesitamos escribir 30 líneas de código. Para resolver este problema, sus introducen mezclas. Las mezclas básicamente funcionan como funciones. Si tenías conocimiento de JavaScript, entonces ya estás familiarizado con las funciones. Permítanme aclarar este concepto. Te voy a mostrar un ejemplo. Si quieres crear mezcla en SAS, al principio, necesitas escribir add mixins, y luego necesitas tomar mix en nombre Puedes tomar cualquier nombre. En nuestro caso, radio BD. Solo debes recordar, no proporciones ningún espacio en este nombre, y luego necesitas tomar carreras redondas y es completamente opcional. Si quieres tomar algún parámetro, entonces necesitas pasar el nombre de la variable. Como puede ver, en nuestro caso, valor, entonces necesitamos usar esta propiedad tres dentro de esta mezcla. También se puede pasar el parámetro con esta propiedad. De esta manera, podemos crear nuestra función de mezcla. Ahora la pregunta es ¿cómo podemos usar esta función de mezcla en nuestro código CSS? Déjame mostrarte. Para eso, voy a usar la clase uno. Si quiero usar esta mezcla, necesitamos escribir a la tasa incluir, entonces nuestro nombre de mezcla radio de borde. Dentro del paréntesis, necesitamos pasar el valor del radio del borde como función similar Cuando llamo a esta función de mezcla, entonces tenemos que pasar un valor como parámetro, y luego podemos usar este parámetro como un valor, valor para tres propiedades diferentes. Sin perder el tiempo, comencemos la práctica y tratemos de entender cómo podemos usar los mixins Como pueden ver, lado a lado, abro mi estudio visual Corretor y mi navegador y ya creo un nuevo documento DML Y aquí puedes ver en mi navegador, ya creamos tres div diferentes para este ejemplo, y además establecemos tres ID diferentes para este tres Div. Para nuestro primer dif nos fijamos primero. Para nuestro segundo, establecemos segundo, y para nuestro último si establecemos tercero, y también vinculo nuestro archivo CSS con este documento. Así que saltemos al archivo CS e intentemos explorar cómo funciona la mezcla. Al principio, quiero establecer ideas de frontera todos estos tres D. Para eso, voy a usar el método de mezcla. Vamos a crear una mezcla. Añadir la velocidad de mezcla. Entonces después de mezclar Qard, necesitamos tomar el nombre de mezcla y nuestro nombre de mezcla es BD radius Y entonces necesitamos usar paréntesis para nuestros parámetros. Es bastante similar con la función JavaScript. Entonces dentro del Kaliss voy a establecer nuestra primera propiedad y nuestro primer nombre de propiedad es dash web keith Ber radio Por ahora, voy a establecer Radio de barra por píxel, y voy a duplicar esta línea para escribir. Al principio, uso prefijo para nuestro antiguo navegador Crone y después voy a usar prefijo para el navegador Mozilla, así que voy a escribir Msare Y por fin, voy a usar el radio exacto del borde de la propiedad. Ahora nuestra mezcla está lista para usar. Recuerda, no usamos ningún parámetro en esta función de mezcla porque por ahora, no quiero pasar ningún valor como parámetro. Al principio, voy a usar esta función de mezcla en nuestro primer tap. Para eso, primero, necesitamos escribir Incluir palabra clave a la tasa, incluir. Después de la palabra clave Include, necesitamos escribir el nombre de mezcla, y nuestro nombre de mezcla es el radio VD. Después paréntesis y subagin para terminar esta línea. Recuerda, si quieres llamar a esta función mix in, siempre, necesitas usar add the red include keyword. Ahora bien, si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Se puede ver el radio fronterizo en nuestro primer salto. Y ahora voy a llamar a la misma función de mezcla en nuestra segunda y tercera profundidad. Si configuro este archivo y reescribí mi navegador, se puede ver el mismo resultado, todos estos tres deeps Ahora quiero tres radios fronterizas diferentes para estas tres profundas y ahora quiero tres radios boder diferentes para estas tres deeps Supongamos que para nuestro primer af, quiero un radio de borde de cinco píxeles. Para nuestro segundo sordo, quiero un radio de bóer de diez píxeles, y para nuestro tercero, quiero un radio de borde de 15 píxeles En ese caso, necesitamos usar parámetro en nuestra función de mezcla. Necesitamos establecer un nombre de variable como parámetro. Para eso, necesitamos usar signo de dólar, dólar y nuestro nombre de variable es valor. Entonces voy a copiar este valor, y lo voy a usar como valor de propiedad. Algo así. Ahora necesitamos pasar el valor cuando llamamos a la función de mezcla. Para nuestro primero, voy a decir cinco píxeles. De igual manera, para nuestro segundo DV, quiero usar diez píxeles de radio boer, diez píxeles Y para nuestro último DV, quiero usar radio de boder de 15 Pixel. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Entonces, como puede ver, configuramos con éxito tres radios fronterizas diferentes para estas tres escrituras. Este es el caso de uso de la función de mezcla en SAS. Espero que ahora te quede claro. Así que gracias por ver este video, estad atentos para nuestro próximo estudio. 8. Tutorial de Sass Extend: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con SAS. Y en este tutorial, vas a aprender una característica muy útil, que es la extensión. Supongamos que tenemos una clase llamada clase uno, y como puede ver, usamos cuatro propiedades en esta clase, color, tamaño de fuente, relleno y altura de línea. Con eso, tenemos otra clase, y el nombre de nuestra clase es la clase dos. Como puedes ver, en nuestra clase uno, usamos el color rojo, y en nuestra clase dos, usamos el color naranja. Aquí se puede ver sin propiedad de color, cada propiedad y su valor son iguales. Su tamaño de fuente, su relleno y su pelusa. Todo es igual. Ahora supongamos que tenemos otra clase, la clase tres. De igual manera, sin color, todas las propiedades son iguales, su tamaño de fuente, su relleno y su altura de línea. Entonces repetimos su proberidad y su valor al tiempo. Quiero decir, tenemos que teclear seis líneas extra para eso. Entonces, para manejar este tipo de situaciones, CS introdujo un nuevo método, que existe. ¿Por qué necesitamos trabajar con el archivo CS al principio, necesitamos crear más uno tal como es. Pero cuando creamos nuestra clase dos, al principio, necesitamos anular la propiedad de color porque no quiero repetir este color rojo para este DV. Por eso manifiesto este color. A continuación, necesitas usar la palabra clave extend, en la extensión roja, y quiero extender esta clase con la propiedad class one. Por eso tecleo la clase uno. Puedes extender con ID de clase, lo que quieras. Del mismo modo, para nuestra tercera clase, solo necesitamos anular el color, color verde, y luego tenemos que seguir el proceso similar. Agrega la extensión roja o la clase uno. Es decir, quiero usar una propiedad de clase uno en la clase tres. Entonces, sin perder el tiempo, comencemos la práctica y tratemos de entender cómo podemos usar el método extend. Como pueden ver, lado a lado, abro mi coeator visual studio y mi navegador usando la extensión if server, y también abro nuestra aplicación Koala Como puedes ver, tenemos que contar tres profundidades diferentes con su diferente color de fondo y su diferente tamaño. Para este tres Deep utilizamos tres ID diferentes, primero segundo y tercero. Este es nuestro archivo CSS, estilo punto CSS. Si te muestro mi archivo CSS, aquí puedes ver para nuestro primer dip, nuestro color de fondo es gris y con este 300 pixel. De igual manera, para nuestra segunda inmersión, utilizamos fondo de color naranja y con 400 píxeles. Y para nuestra tercera inmersión utilizamos color de fondo rojo y con 600 píxeles. Sin estas dos propiedades, cada propiedad y su variar es la misma. Se puede notar relleno 15 píxeles radio de borde diez píxeles, familia de fuentes aérea, tamaño de fuente 20 píxeles. Si seguimos este método regular, entonces necesitamos escribir ocho líneas extra. Entonces, para resolver este tipo de problemas, SAS introduce extend. Volvamos al archivo CS. No vamos a cambiar nada en nuestro primer si, pero en nuestro segundo Dave, voy a usar el método extend. Déjame mostrarte. Al principio, voy a eliminar esta línea de cuatro, relleno de radio boder y familia de fuentes y lados de fuente Entonces voy a usar la palabra clave, en el at extend. Y ahora quiero extender este segundo ID con el primer ID. Aquí, tenemos que escribir tiene etiqueta primero. Después semiconm para terminar esta línea. Si configuro este archivo, aquí puedes ver que no hay cambios. Funcionó a la perfección. A continuación, voy a seguir este proceso similar para nuestro tercer profundo. Voy a quitar las propiedades, y voy a extender en el rojo, extender y quiero extender nuestra tercera e con nuestra primera D tiene etiqueta primero. Después semicron para terminar esta línea. Si configuro este archivo, puedes ver no hay cambios en nuestro navegador. Por lo que extendemos con éxito nuestro primer ID. Pero si te muestro mi archivo CSS, déjame mostrarte cómo puedes verlo crea una combinación de selector de ID, primero, segundo y tercero, también puedes ver dos IDs diferentes segundo y tercero. Solo se usa para sobrescribir color de fondo y profundo con 400 píxeles, 600 píxeles, fondo rojo y fondo naranja Como puedes ver, es muy útil. Si notas, puedes ver que es bastante similar con las mezclas, pero hay una diferencia entre mezclas y extend. ¿Cuál es la diferencia? La primera diferencia es que podemos pasar un valor como parámetro en mixins, pero no podemos pasar el valor como parámetro en extension La segunda diferencia es que podemos usar selector combinado en extend. Pero dentro de los mixins, no podemos usar selector combinado, y ahora voy a mostrarte otro método, cómo podemos usar extend Entonces ya conoces el proceso, cómo podemos usar el extender. Al principio, necesitamos crear una clase, y luego usando esta clase, podemos extender esta clase con otra clase y ya conoces el proceso. Supongamos que ahora decide que no quiere mostrar la clase uno en su archivo CSS, pero quiere usar su propiedad en la clase dos y la clase tres. En ese caso, es necesario usar signo de porcentaje antes del nombre de la clase. Ahora la clase uno es reutilizable, similar a mix ins. A esto lo llamamos Hoolder de BathodPlace. Ahora el marcador de posición, no va a reflejar en su archivo CSS, si desea extender su propiedad con este marcador de posición, entonces necesita usar en la ayuda extender, signo de porcentaje y el nombre de la clase Solo necesitas recordar el marcador y extender el trabajo juntos. Entonces déjame mostrarte la demostración real. Una vez más, vuelvo a mi coordinador de estudio visual. Entonces primero, voy a crear un marcador de posición, así que voy a quitar este hastag luego voy a usar Ahora transformamos nuestro primer ID en un marcador de posición, y voy a usar este marcador de posición en nuestro segundo dip Y si quieres usar marcador de posición con extend, entonces necesitas usar percentisine Ahora nuestro segundo div se extiende con este marcador de posición. Además, quiero extender nuestro tercer dip con este marcador Voy a usar percentisg aquí . No configuro este archivo. Si configuro este archivo, primero, va a destruir estas propiedades profundas porque transformamos nuestro primer ID en un marcador Como te dije antes, nuestro marcador no va a reflejarse en nuestro archivo CSS Si configuro este archivo, puedes ver el resultado. Primero, destruye nuestra primera profundidad, pero mantuvo la propiedad anterior para segunda inmersión y tercera inmersión. Si te muestro mi archivo CSS, aquí puedes ver el resultado. Aquí puedes ver que hay aquellos seleccionados nombre IDF. Solo se pueden ver dos selectores, ID segundo y ID tercero. Primero, crea una combinación usando segundo ID y tercer ID, y luego crea un segundo selector de ID y un tercer selector de ID para sobrescribir el color de fondo y el ancho Usando placeholder, podemos crear un código reutilizable, y podemos usarlo varias veces Espero que ahora te quede claro qué es la extensión y el marcador En el siguiente tutorial, vamos a aprender operadores SAS. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 9. Tutorial de operadores de Sass: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con CS, y en este tutorial, vamos a aprender operadores CS. Aquí puedes ver, tenemos un total de cinco operadores diferentes. Nuestro primer nombre de operador es operador de igualdad. Luego vienen operador relacional, operador numérico, operador de cadena y operador wllian Y en este tutorial, vamos a aprender operador de igualdad, operador relacional y operador wollan Pero al principio, tratemos de entender qué son los operadores de meningum Al principio, voy a hablar de operador de igualdad y operador relacional Como puede ver en nuestro operador de igualdad, tenemos dos tipos de operador, doble igual a operador y no igual a operador. En igual a operador, necesitamos usar igual seno dos veces. Pero en no igual a operador, primero, necesitamos usar la explicación seno, luego necesitamos usar seno igual. Es decir, no igual. Usando igual a operador, podemos comparar valores. Supongamos que nuestro primer valor es cinco, cinco igual a cinco, entonces va a devolver verdadero porque ambos el valor son iguales. De igual manera, si uso no igual a seno, también va a devolver valor verdadero o falso según la comparación. Este es el uso del operador de igualdad. Vamos a conocer más al respecto en nuestras prácticas. Por otro lado, contamos con operadores relacionales. Y viene con cuatro operadores diferentes. Menor que operador, mayor que operador, menor que igual a operador, mayor que igual a operador. Todo esto operador de igualdad y operador relacional uso con condición IP en SAS lo llamamos función I En nuestros próximos tutoriales, vamos a conocerlo. En este tutorial, vamos a aprender, ¿cómo podemos usar condiciones con eso? Sin perder el tiempo, comencemos la práctica. Aquí puedes ver, ya puse mi carpeta CSS en este compilador SS Quala, y también puedes ver, abro nuestro archivo CS y nuestro archivo CSS lado a lado, y aquí puedes ver un selector de clases, clase Ahora voy a iniciar esta práctica con operador de igualdad. Déjame mostrarte. Al principio, voy a tomar una propiedad CSS, que es padding. Relleno, diez píxeles iguales a diez píxeles. Aquí voy a comparar dos valores. Si configuro este archivo, aquí puedes ver en nuestro archivo CSS, está escrito padding, true. Aquí coincidimos diez píxeles iguales con diez píxeles, cuando configuro este archivo, está escrito true. Sí. La condición es verdadera, pero no usamos este operador así. Si estás familiarizado con JavaScript, entonces lo sabes. Si conoces JavaScript, entonces ya estás familiarizado con la condición p, y vamos a aprender sobre ello en nuestros próximos tutoriales. Aquí solo te digo cómo podemos usar operadores de comparación. Aquí puedes ver comparamos diez píxeles con diez píxeles, pero si cambio el valor diez píxeles a diez EM si configuro este archivo, ahora puedes ver que está escrito relleno fols porque diez píxeles valor y 10:00 A.M El valor no es seguro. De igual manera, si comparo con diez píxeles con 15 píxeles, déjame mostrarte que configuraré este archivo, también se escribe falso porque 15 píxeles es mayor que diez píxeles. Pero si uso no igual a operador, déjame mostrarte y luego establecer este archivo. En ese caso, está escrito verdadero porque nuestra condición es verdadera. Diez píxeles no es igual a 15 píxeles. Como puede ver, aquí comparamos nuestro valor con valor numérico, pero también podemos usar valor de cadena. Déjame mostrarte. Aquí voy a escribir nombre de fuente AL voy a comparar así que voy a usar igual a seno con aérea. Si configuro este archivo, aquí puedes ver que está escrito true porque ambas fuentes están a la venta. Pero si uso la fuente Roboto, déjame mostrarte que configuré este archivo, ahora está escrito falso No solo el valor de cadena, también podemos comparar el valor complejo. Déjame mostrarte. Dentro de las rotondas, voy a escribir cuatro píxeles, seis píxeles y dos píxeles, y voy a copiar esta diapositiva, y la voy a pegar aquí Si configuro este archivo, como pueden ver, está escrito true porque tanto el valor es verdadero. Pero si cambio un valor, siete píxeles, y luego configuro este archivo, ahora puedes ver que está escrito falso. Pero si uso no es igual a seno, y luego configuro este archivo. Ahora está escrito dos porque ambas la condición no son similares. Por eso está escrito dos. Se trata de nuestros operadores de igualdad, y ahora voy a mostrarles lo que son los operadores relacionales Básicamente, el operador relacional trabaja con valores numéricos. No podemos usarlo con valor de cadena. Para eso, déjame mostrarte un ejemplo. Voy a quitar este y aquí voy a escribir 50 mayor que cuatro. Quiero decir es el número 50 mayor que el cuatro? Si configuro este archivo, como pueden ver, está escrito dos. Pero si paso 60 y luego configuro este archivo. Como pueden ver, está escrito fw Porque en nuestra condición anterior, 50 es mayor que cuatro, pero en esta condición, 50 no es mayor que 60 Por eso nuestra condición formas escritas. No sólo eso, podemos usar este valor con unidad. Déjame mostrarte 50 píxeles y 60 píxeles. Si configuro este archivo, puedes ver que está escrito fg. Pero si paso 40 semanasaquí y luego pongo este archivo, ahora se puede ver que está escrito true No sólo eso, se puede comparar con diferentes unidades. Déjame mostrarte. Supongamos que quiero comparar con 1,000 milisegundos mayor que igual a 1 segundo Si configuro este archivo, aquí puedes ver que está escrito true. Como puedes ver, su unidad es diferente, s y, pero su valor es el mismo. Por eso está escrito verdadero, aquí uso mayor que igual al operador relacional Usando este operador, podemos comparar si 1,000 s es mayor que uno es, en ese caso, va a devolver true, de lo contrario, si 1,000 s igual con uno es, en ese caso, va a devolver true. Pero si paso dos segundos aquí y luego configuro este archivo, como pueden ver, es formulario de devolución. Porque 1002do no es mayor a dos segundos. Aquí puede ver podemos comparar dos valores unitarios diferentes con la misma categoría. Podemos comparar el segundo con nuestro minuto, microsegundo, etcétera. Pero si trato de comparar s con pixel, déjame mostrarte 1,000 ms mayor que dos pixel. Entonces si configuro este archivo, ahora puedes verlo escrito error porque su categoría es diferente, no podemos comparar el tiempo con el área. Por eso necesitamos usar la misma categoría. Ahora hablemos de los operadores de Bullion y cómo podemos usarlo. En SAS, tenemos que decirle a tres tipos de operador Bollier y o no, y siempre se escribe resultado verdadero o falso Podemos usar todo el operador booleano con múltiples condiciones Quiero decir, si quieres verificar más de una condición, puedes usar estos operadores. Usamos y operador si tanto la condición es verdadera, luego escrita verdadera, de lo contrario está escrita falsa. No sólo dos condiciones, se puede agregar más condición con este operador. Déjame mostrarte el ejemplo. Supongamos que esta es la condición uno y yo uso y operador, y esta es la condición dos. En nuestra condición uno, cinco píxeles igual a cinco píxeles. Quiero decir, la condición es verdadera y en nuestra segunda condición, fuente aérea igual a forma de área. Aquí comparamos con el valor numérico y aquí comparamos con el valor de cadena. Como puede ver, ambas condiciones son ciertas. En ese caso, va a volver a resultado. Y si alguna condición no devuelve verdadera, en ese caso, va a devolver falsa. A continuación, hablemos de o operador de lingotes. Si una de las condiciones es verdadera, entonces está escrita verdadera. De lo contrario, está escrito falso. Supongamos que tenemos que condicionar la condición uno y la condición dos. En nuestra condición uno, comparo cinco píxeles con 15 píxeles y en nuestra condición dos, comparamos la fuente de área con el área cuatro. En ese caso, sabes que una de las condiciones es verdadera, fuente aérea igual a fuente aérea. Porque una de las condiciones es cierta, por eso está escrita verdadera. Y si tanto la condición escrita falla, en ese caso, va a volver falla, y nuestro último operador no es operador. Siempre se escribe valor opuesto. Si la respuesta es verdadera, va a devolver respuesta falsa, y si la respuesta fue falsa, va a devolver respuesta verdadera. Básicamente, se escribe respuesta opuesta. Entonces, sin perder el tiempo, estudiemos prácticas y veamos cómo funciona. Entonces como puedes ver, una vez más, vuelvo a mi editor de código de Visual Studio. Y ahora voy a usar una condición con operador Boulan Al principio, voy a usar esta condición 1,000 milisecad mejor que igual a 1 Ismein va a devolver verdadero resultado, como se puede ver, es retorno Con eso, voy a usar operador final y cinco píxeles, igual a cinco píxeles. Si configuro este archivo, como pueden ver, está escrito true porque tanto la condición es verdadera. Pero si falseé una condición, entonces quiero cambiar cinco píxeles iguales a seis píxeles y luego establecer este archivo. Ahora cae Seton. Ahora bien, tanto la condición no es cierta, nuestra primera condición es cierta, pero nuestra segunda condición falla. Por eso está escrito falla porque usamos operador. Pero si usaba u operador, ¿entonces qué? Ahora voy a usar u operador. O si configuro este archivo, va a devolver dos porque como saben, si una de las condiciones es verdadera, entonces va a devolver dos. Y si tanto la condición falla, déjame mostrarte. Voy a cambiar dos segundos y luego establecer este archivo como se puede ver, está escrito falla. Y si tanto la condición es verdadera, en todo operador, en ese caso, una vez más, y luchar pixel y luego establecer este archivo, como se puede ver, está escrito true. Entonces en nuestro operador, tanto la condición o una de las condiciones es verdadera, en ese caso, va a volver verdadera. Y ahora les voy a mostrar el último operador lean que no es operable y cómo podemos usarlo. Entonces al principio, voy a duplicar esta diapositiva, y voy a comentar nuestra anterior. Entonces aquí voy a usar no operador. Quiero quitar esta condición y primero, voy a escribir no. Como ustedes saben, no operador siempre escrito resultado opuesto. Entonces cinco píxeles iguales a igual a cinco píxeles. Como saben, la condición es cierta. Si configuro este archivo, aquí puedes ver que son formularios escritos porque está escrito siempre resultado opuesto. Pero si la condición es falla y si uso no igual a operador, cinco píxeles no igual a cinco píxeles y configuro este archivo, ahora se escribe true. Debido a que la condición falla, por eso también se devuelve. Siempre se devuelve el resultado opuesto. Espero que ahora te quede claro lo que son los operadores de Bollan. Así que gracias por ver este video, estad atentos a nuestros próximos tutoriales. 10. Tutorial de operadores de Sass II: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial, operador CS relacionado. Y en este tutorial, vamos a aprender operador numérico CS y operador de cadena SS. Como te dije, en mi tutorial anterior, tenemos a cinco operadores diferentes en operador de igualdad SAS, operador relacional, operador numérico, operador de cadena, y operador Wulian Ya cubrimos operador de igualdad, operador relacional y operador en nuestro tutorial anterior En este tutorial, vamos a cubrir operador numérico y operador de cadena . Empecemos. Al principio, voy a hablar de operador de cadena. Operador de cadena significa operador de concatenación y definimos este operador usando seno más Usamos este operador para agregar una cadena con otra cadena. Usando este operador, podemos unirnos a diferentes stree. No sólo eso, podemos unir valor numérico con cadena el. No sólo eso, usando este operador, podemos unir valor numérico con cadena viel Si estás familiarizado con JavaScript, ya lo sabes. Déjame mostrarte un ejemplo. Aquí puedes ver 50 más px. Aquí queremos unir una cadena hel con una onda numérica. Como resultado, devolvió 50 píxeles. Por otro lado, tenemos operadores numéricos, suma, substrucción, multiplicación, división, módulo, de lo contrario, lo llamamos recordatorio Utilizamos este operador para cálculos aritméticos. Empecemos la práctica y tratemos de entender cómo podemos usarla. Como pueden ver, ya abro mi software compilador CS Koala también se puede ver en mi coretor de Visual Studio lado a lado, abro mi archivo CS y mi archivo CSS Entonces, al principio, te voy a mostrar cómo podemos usar operadores de cadena. Para eso, voy a crear dos variables. Dólar, colon, y voy a tomar 50 como en. Entonces voy a dugar esta línea, y esto es lo que dos. Aquí me voy a llevar cinco. Esta es la variable uno, y esta es la variable dos. Ahora voy a darle estilo clase punto clase uno. Entonces en los hígados, voy a tomar una propiedad de NCSS Supongamos margen para Valor, voy a usar la variable uno, uno. Uno. A continuación, voy a usar seno de concatenación. Después de concatenación seno, voy a pasar px. Aquí puedes ver nuestro valor numérico escrito V uno, y quiero concatenar Var uno con valor de cadena px Yo configuro este archivo, como pueden ver, está escrito Margen 50 pixel. Así que aquí nos unimos dos tipos diferentes de valor usando operador de cadena y llamamos a este método de concatenación Con eso, te voy a mostrar cómo podemos usar operadores numéricos. Entonces con er quiero agregar $2.02. Hasta dos, una vez más, voy a usar concatenar seno. Ahora bien, el signo 1-2, no es un signo de concatenación. Esto es seno de suma, pero este signo va a actuar como un signo de concatenación. Entonces si configuro este archivo, aquí puedes ver que nuestro margen es de 55 píxeles. Entonces como saben, usando operador de suma, podemos agregar dos valores, pero ahora voy a usar operador de subestricción. Menos. Yo configuro este archivo, ahora se puede ver nuestro nuevo margen es de 45 pixel. Es un radio de cinco píxeles a partir de 50 píxeles. Por eso está escrito 45 píxeles. Este es el caso de uso del operador de substrucción, y de esa manera, podemos usarlo De igual manera, podemos usar el lado de multiplicación. Si configuro este archivo, se puede ver el resultado, 250 píxeles. Si uso el seno de división y luego configuro este archivo, ahora se puede ver que la respuesta es de diez píxeles y ahora voy a usar nuestro operador lujuria, que es el módulo. Déjame mostrarte cómo. Si usamos el signo de módulo, entonces te dará el recordatorio hasta la división. Si configuro este archivo, como pueden ver, no hay ningún recordatorio, por eso devuelve cero píxeles. Pero si cambio el valor Var one, 54 y luego configuro este archivo, ahora se puede ver que el recordatorio es cuatro. Entonces este es el caso de uso del operador de módulo. Entonces básicamente, no usamos este operador numérico de esa manera. Lo usamos cuando creamos diseños complejos. Déjame mostrarte. Entonces para este ejemplo, voy a tomar una nueva propiedad, que es el tamaño de fuente. Tamaño de fuente, y voy a usar Var one. Congetinar con pixel. Si configuro este archivo, puedes ver el resultado. El tamaño de fuente de clase uno es de 54 píxeles. Pero para nuestra etiqueta de encabezado uno, quiero el tamaño de fuente dos veces, luego la clase uno. Déjame mostrarte el tamaño de la fuente. Dólar uno, multiplicar por dos concatenar píxel concatenar Si configuro este estilo, puedes ver el resultado. Ahora nuestro encabezado un tamaño de fuente es de 108 píxeles porque quiero mostrar dos veces el tamaño de fuente luego la clase uno, luego la clase uno. Por eso utilizo operador de multiplicación. En nuestra clase uno, está escrito 54 píxeles y en nuestro encabezado uno, está escrito 108 píxeles. De esa manera, usamos variables y operador numérico juntos, mayoría de las veces lo usamos con condición p de lo contrario bucles, y vamos a aprender sobre ello en nuestro próximo tutorio así que esto es todo para este tutorial En el siguiente tutorial, vamos a aprender un nuevo concepto relacionado con el stream, que es la interpolación Estén atentos para nuestro próximo tutorial. Gracias por ver este video. 11. Tutorial de interpolación de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender interpolación, interpolación SAS En nuestro tutorial anterior, aprendemos operadores de cadena. Con eso, aprendemos operadores de concatenación de cadenas. Usando la concatenación de cadenas, podemos agregar valor de cadena con valor numérico como puede ver el resultado. Aquí lo puedes ver. Como puedes ver aquí, 50 concatan con pixel y como resultado, devolvió 50 Pero el problema es que no podemos usar concatate sine en las propiedades CSS Solo podemos usarlo en valores CSS. Además, no podemos usar seno de concatenación en el selector CSS. Déjame mostrarte un ejemplo. Aquí puedes ver, tomo un nombre de propiedad margin, margin hyphen concatenation sine, y llamo a una variable Puedes poner cualquier valor aquí, lab, arriba, derecha, quiero decir supongamos margen top 20 pixel, pero no podemos usar seno de concatenación en ese lugar Déjame mostrarte otro ejemplo con selector. Supongamos que hay una clase llamada image dot image hyphen concatenate con imaging, pero no podemos usar concatenación sine en Podemos usar concatenación solo en nuestras válvulas. Pero para este tipo de congtación SAS introduce Si quieres congtnate con propiedades, de lo contrario clases, en ese caso, necesitamos usar el método de interpolación y necesitamos usar este signo, hashtag Dentro del calrass necesitamos poner la línea variable, y luego podemos congatenar Déjame mostrarte el ejemplo. Si quieres congatenar estas propiedades y la clase, en ese caso, entonces necesitamos escribir Fusionando el guión hastag dentro del calirass, necesitamos pasar la posición variable de la extremidad Esto es para propiedad. Del mismo modo, para una clase, necesitamos seguir el mismo método. Después del hashtag, necesitamos usar Calirasis y luego dentro de la calirasis necesitamos pasar el nombre de la variable Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, ya abro mi aplicación Kuala, y en mi editor de código visual studio, lado a lado, abro archivo CS y nuestro archivo CSS Empecemos lo práctico y veamos cómo podemos usar la interpolación. Al principio, voy a declarar una mezcla. A la d mezcla. Y nuestro nombre de mezcla es margin. Y dentro de este paréntesis, quiero pasar dos parámetros o la primera variable m es posición, y nuestra segunda variable m es unidad También voy a llamar a la mezcla en nuestra clase. Déjame mostrarte. Voy a seleccionar una clase punto clase uno. Dentro de los alias, voy a incluir la mezcla. Añadir el rojo, incluir, y nuestro nombre de mezcla es margin. Al principio, voy a pasar el valor de la posición. Nuestra posición queda. Después de la posición, tenemos que pasar la unidad aquí voy a pasar 20 y luego semicolum para terminar esta línea Ahora dentro de esta mezcla, voy a tomar nuestra propiedad CSS que es margin. Margen, guión, aquí voy a usar el método de interpolión Hastag Cariss. Ahora quiero concatear margen con otra variable, y aquí voy a pasar variable de posición, posición Como puede ver, en nuestra variable de posición, pasamos valor a la izquierda y luego después de columna por valor, voy a usar variable unitaria. Unidad de dólar. Quiero congatenarme con pixel Después semicon para terminar esta línea. Si configuro este archivo, como se puede ver en mi archivo CSS, se imprime margen labio 20 pixel. Ahora podemos cambiar la posición simplemente escribiendo el nombre. Supongamos que voy a pasar arriba y aquí voy a pasar 40. Si configuro este archivo, ahora puedes ver el margen superior de 40 píxeles. Aquí puedes ver, usamos una mezcla llamada margin y dentro de esta mezcla, usamos el método de interpolación Y pasamos valor de esta mezcla y congtnate con la propiedad CSS, y también congtnate Esta es la USKsot es la interpolación uskaso. En este ejemplo, usamos interpolion con propiedad CSS, y ahora voy a usar interpolion Para eso, voy a crear otra mezcla. En la mezcla roja en, y nuestro nombre de mezcla se establece imagen, SET IMG Entonces dentro del caliass y dentro de este paréntesis, quiero pasar un parámetro, y nuestro nombre de parámetro es dollar mail Ahora dentro de los alias, quiero congatenar nuestro selector, punto, imagen, guión, tiene etiqueta Dentro de la liss, voy a llamar el nombre de la imagen. Entonces aquí usamos la interpolición para congtnar nuestro selector. Entonces dentro de los hídos, voy a usar una propiedad CSS, que es imagen de fondo Fondo, imagen, y voy a usar URL Vu para la imagen de fondo. URL dentro del paréntesis, dentro de los códigos dobles, nosotros para pasar la ubicación del archivo, y nuestra ubicación de archivo es imagen, barra nuestra Además, aquí podemos usar método Interpoliion para tomar el nombre de la imagen. Déjame mostrarte. Hashtag dentro de los alias, voy a pasar la variable, que es nombre Después del nombre de la imagen, necesitamos pasar la extensión de la imagen, y nuestra extensión es JPG. Ahora tenemos que llamar a esta mezcla y tenemos que pasar el nombre de la imagen. Para llamar a la mezcla a escribir a la tarifa incluir. Entonces tenemos que pasar el nombre de mezcla, establecer imagen, establecer imagen. También tenemos que pasar el nombre de la imagen. Supongamos que el nombre de nuestra imagen es Cloud. Y luego punto y coma dos en esta línea. Si configuro este archivo, como pueden ver, primero, crea un selector CSS, imagen Cloud, y luego crea el nombre de la imagen nube punto JPG. Usando interpolación, podemos concatenar el selector CSS, y también podemos usarlo como nombre de imagen porque no podemos usar signo más para concatenar el selector CSS y las propiedades CSS Es por eso que CS introdujo la interpolación CSS. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 12. Tutorial de funciones de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS. En este tutorial, vamos a aprender las funciones SAS. Si ya estás familiarizado con JavaScript, entonces sabes lo que es la función. Entonces déjame mostrarte cómo podemos crear funciones en SAS. Para crear una función en SAS, primero, necesita tomar una palabra clave y dilatar la función, luego el nombre de su función Recuerde, no proporcione ningún espacio entre el nombre. Se puede utilizar de otra manera bajo sco sine, pero no proporcionar ningún espacio. Después dentro del paréntesis, se puede tomar un parámetro, parámetro múltiple, de lo contrario ningún parámetro Depende de usted. Para este ejemplo, tomé un parámetro, significa una variable, y nuestro nombre de variable es value. Y luego necesitas usar calibraciones. Si recuerdas, la función y la mezcla son bastante similares, pero hay una diferencia. Básicamente, la función puede devolver un Val. Puede devolver cálculos aritméticos, pero mezclar no. Pero las mezclas siempre imprimen lo que ya estaba escrito en la mezcla, pero funciones valores escritos, y podemos usar este valor en nuestros próximos códigos Supongamos que creo un nombre de clase un tercio y dentro de este selector, como pueden ver, utilizo una propiedad nombrada con y llamamos a nuestra función y pasamos un valor 1,200. Entonces nuestra función va a dividir este valor con tres y devolver 400 y luego concatenar el numero con pixel en nuestro CSS pasa con 400 Déjame mostrarte un escenario que puede despejar tus dudas. Supongamos que tenemos un contenedor padre y su ancho es de 1,200 píxeles, y ahora quiero dividir este ancho en tres partes. En ese caso, cada celda toma 400 píxeles. Para ello, podemos crear una función, que puede dividir nuestro contenedor en tres por. Si cambiamos el ancho de este continuador, automáticamente divide nuestro continuador en tres De igual manera, si queremos dividir este continuador en dos partes, en ese caso, necesitamos crear una función, que pueda dividir nuestro valor en dos partes Supongamos que en el futuro, se quiere cambiar el exterior hizo. Algo 1,500 píxeles. En ese caso, nuestra función va a desviar el continu con igual tamaño, 500 píxeles, 500 píxeles y 500 Este es el caso de uso de la función, por lo que no necesitamos escribir el ancho de las celdas manualmente. Vamos a calcularlo usando la ayuda de la función. Entonces comencemos la práctica y veamos cómo podemos usarla. Una vez más, vuelvo a mi coordinador de estudio visual. Al lado del otro, abro estilo punto archivo Ss y estilo archivo CSS. Al principio, voy a establecer un ancho de contenedor. Para eso, voy a tomar una variable. Y nuestra variable nm es ancho CN, dos puntos y para nuestro ancho continuo, voy a tomar 1,000 Por ahora, voy a tomar cualquier unidad como pixel, M, etcétera Ahora voy a crear una función, que va a dividir mi continuari en tres partes Entonces para crear una función, voy a escribir aderdFunction, y nuestro nombre de función es un tercio, un tercio Después dentro del paréntesis, el usuario va a pasar un parámetro Para este parámetro, voy a tomar una maleza variable dólar. Después dentro de los alias, sea cual sea el usuario que vaya a pasar, quiero dividirlo en tres partes Entonces para eso, voy a usar la palabra clave return. A la vuelta roja. Entonces ancho dólar dividido por tres, porque quiero dividir por igual el ancho continuo en tres partes, y luego voy a usar concatenar s más y luego voy a usar concatenar s Esto es para unidad porque como resultado, quiero devolver unidad de píxeles. Así que creamos con éxito nuestra función y nuestro nombre de función es un tercio, y ahora quiero llamar a esta función. Para llamar a la función, necesitamos darle estilo a una clase, y nuestro nombre de clase es un tercio de hierba. Entonces dentro del auto resiste, lo voy a llamar propiedad y nombre de nuestra propiedad es qué. Qué. Ahora voy a llamar a nuestra función, y nuestro nombre de función es un tercio, un tercio. Entonces dentro de este paréntesis, voy a pasar esta variable Antes de configurar este archivo, permítanme cambiar el ancho del contenedor. Voy a sustituir mil mil por mil 200. Si configuro este archivo, como pueden ver, nuestro ancho de contenedor de un tercio es de 400 píxeles. Entonces en el futuro, si cambio el ancho del contenedor, 1,200 píxeles a 500 píxeles y luego configuro este archivo, aquí se puede ver, siempre está escrito el tercio de este ancho de contenedor, que es de 500 píxeles. Este es el caso de uso de la función. Del mismo modo, si quieres dividir el ancho de tu contenedor en dos partes, en ese caso, necesitas crear otra función. Algunos para duplicar esta función, y voy a cambiar el nombre de la función, y nuestro nombre de función es. Pero esta vez, necesitamos dividir el ancho del continuador en dos partes Entonces voy a dividir con dos. Como voy a crear y también voy a crear un selector para eso. Déjame mostrarte. Nuestro nombre más seleccionado es el ancho del buje, el ancho del buje. Instidir las aliras voy a llamar el ancho a la despedida Como valor, voy a llamar a nuestra nueva función y nuestro nuevo nombre de función es hub. Y dentro del paréntesis, aquí voy a pasar nuestro contenedor width variable container width Y también, voy a cambiar el ancho del contenedor, 1,500 píxeles a 1,200 píxeles. Si configuro este archivo, puedes ver el resultado. Aquí puede ver nuestra función hub dividir nuestro contenedor en dos partes y devolver 600 píxeles por una parte, y nuestra tercera función divide nuestro contenedor en tres partes, y cada una divide nuestro contenedor en tres partes, de las partes a 400 píxeles. Ahora te queda claro cómo podemos usar funciones para cálculos aritméticos Entonces en el siguiente tutorial, vamos a aprender las funciones de velo SAS. Así que gracias por ver este video, estad atentos para nuestra próxima tribew 13. Tutorial de funciones de números de Sass: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con CS, y en este tutorial, vamos a aprender las funciones del número SAS Aquí puedes ver que Cs vienen con seis totales en función val, función de números, función de cadena, función de color, última función, función de selector, y la última es la intropeción En este tutorial, vamos a aprender solo funciones numéricas. Veamos cuántas funciones numéricas tenemos en CS. Como puede ver, tenemos función de número total 11 en CS, y vamos a cubrir todos estos en este tutorial. Comencemos la práctica con la función Avis. Físicamente, función Avis escrito voluntad absoluta. Empecemos la práctica. Como pueden ver, ya abro mi editor de cod de estudio de usuario y lado a lado, abro pila estiloide SS y archivo CSS estilo Al principio, voy a crear una clase punto clase uno. Después dentro de los calices, al principio, voy a tomar acssPerty y voy a Acolchado. Nuestra primera función es Avis significa función absoluta. Fila simulada tipo abs. Esta función siempre escrito valor absoluto. Si paso un valor negativo, déjame mostrarte -14 píxeles Si configuro este archivo, como pueden ver, está escrito absoluto, 14 píxeles. Se elimina el valor negativo y se escribe 14 píxeles. Si elimino el signo menos y luego configuro este archivo, como puedes ver, siempre se escribe valor absoluto. Ahora, hablemos de nuestra siguiente función, que es L. Pero antes, voy a duplicar esta línea y comentar la anterior. Aquí voy a usar la función celular C CEL. Entonces dentro de los versos ao, voy a pasar un valor flotante. Déjame mostrarte. 5.3. Y si configuro este archivo, déjame mostrarte. Si configuro este archivo, como pueden ver, está escrito rellenando seis. Si utilizo la función de celda cada vez que devuelva por encima del valor. Si utilizo 5.9 y configuro este archivo, también devuelvo seis. Pero si uso 5.1 y configuro este archivo, también devuelve seis. Siempre está escrito por encima del valor. Pero si paso 5.0 y luego configuro este archivo, ahora está escrito sólo cinco. Si paso el valor flotante en la función de celda, siempre está escrito por encima del valor. Del mismo modo, tenemos función opuesta. Para eso, voy a duplicar esta línea y comentar la anterior. Y aquí voy a teclear piso función FL W R. Luego dentro de la rotonda voy a pasar cuatro y siete Esta función siempre escrita por debajo del valor. Si configuro este archivo, como pueden ver, está escrito sólo cuatro. Sin cero, cualquiera que sea el valor que usemos después del punto va a devolver sólo cuatro. Si paso nueve aquí, también está escrito cuatro. Vamos a saltar a nuestra siguiente función, que es la función round para suplicar esta línea y comentar la anterior. Y aquí voy a teclear función redonda. Fila si configuro este archivo, como pueden ver, está escrito cinco. Esta función es una combinación de función de sello y función de flotación. Después de Dhimil, si el valor es mayor que cuatro, entonces siempre se escribe el valor a a Pero un Djimil, si el valor es inferior a cinco, entonces va a devolver un valor wow Déjame mostrarte si paso, 4.4 aquí, y luego configuro este archivo, como puedes ver, ahora está escrito sólo cuatro. Pero si paso 415 y luego pongo este archivo, ahora se puede ver que está escrito cinco. Este es el caso de uso de la función redonda. Espero que ahora te quede claro cómo funcionan las funciones de venta piso y ejecución. Nuestra siguiente función es la función máxima. Quiero que comiences esta línea y acuestes la anterior. Y aquí voy a llamar a la función max. Esta función siempre devuelve el valor máximo. Supongamos que si tenemos tres valores, déjame mostrarte un píxel, tres píxeles y cinco píxeles. Si dije este archivo, como pueden ver, está escrito de cinco píxeles. Siempre se escribe el valor máximo del menor. la misma manera, tenemos la función opuesta, que es la función min. Suena esta línea y comenta la anterior, y aquí voy a llamar a nuestra función Min. Si configuro este archivo, como pueden ver, está escrito el valor más bajo de esta lista. Siempre se escribe el valor más bajo. Básicamente, no usamos esta función así. Cuando necesitamos trabajar con cálculos aritméticos complejos, entonces usamos esta función Ahora, hablemos de nuestra siguiente función, que es percentis Así que para comenzar esta línea y comentar la anterior Y aquí voy a teclear percentis. Esta función siempre devuelve el valor porcentual. Si paso 0.3, configuro este archivo, como pueden ver, está escrito 30%. Además, si trabajo con cálculo aritmético, déjame mostrarte 200 píxeles divididos por 50 píxeles Si configuro este archivo, como pueden ver, está escrito 400%. Esta función siempre devuelve porcentaje. Nuestra siguiente función es comparable. Para eso, voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir comparable. Usando esta función, podemos comparar dos unidades. Si las unidades son coincidentes, están escritas, verdaderas, lo contrario, son formas escritas. Déjame mostrarte la demostración. Entonces aquí voy a pasar dos píxeles y nuestro siguiente valor es de cuatro píxeles. Si configuro este archivo, como pueden ver, está escrito true porque sus unidades son iguales, pixel y pixel. Pero si paso unidad EM y luego configuro este archivo, EM y configuro este archivo, como pueden ver, ahora está escrito fobs Porque su unidad es diferente. Por eso no pudimos compararlo. Pero si paso el valor de centímetro aquí, CM, y si paso MM unidad, y luego configuro este archivo, como pueden ver, ahora está escrito a través porque podemos comparar centímetro con milímetro Por eso está escrito a través. Hablemos de nuestra siguiente función, que es aleatoria. Voy a duplicar esta línea y comentar la anterior. Entonces voy a escribir al azar. Esta función siempre escribió un valor aleatorio. Si pongo esta pila, como pueden ver, está escrito un valor aleatorio. Si configuro este archivo una vez más, puedes ver que está escrito un valor aleatorio diferente. Por defecto, la función aleatoria escribe el valor 0-1. Por eso se escribe valor flotante. Pero si paso un número, algo 12 y luego pongo este archivo, ahora está escrito un número 0-12 Podría ser cualquier número 0-12, y en nuestro caso, está escrito diez Si configuro este archivo una vez más, ahora puedes ver que está escrito uno. Hablemos de nuestra siguiente función, que es la unidad. Para eso, voy a embotar esta línea y comentar la anterior Y aquí voy a mecanografiar unidad. Para este ejemplo, voy a pasar un número, que es 22. Si configuro este archivo, como pueden ver, está escrito solo los códigos dobles, no el número porque no pasamos ninguna unidad, sino si paso pixel PH y luego configuro este archivo, como pueden ver, se escribe solo el píxel de la unidad. Función de unidad siempre escrita la unidad. De igual manera, si paso centímetro, CM, y luego pongo este archivo, aquí se puede ver que está escrito centímetro. Ahora, hablemos de nuestra última función, que es unidad menos. Para eso, voy a duplicar esta línea y comentar la anterior. Y aquí voy a teclear unitless. Básicamente, esta función va a volver al valor, ya sea true, ya sea false. Básicamente, esta función va a verificar, ¿proporcionamos unidad con este valor o no? Si configuro este archivo, como pueden ver, está escrito falso. Porque brindamos unidad, por eso está escrito fals. Pero si no proporciono la unidad, configuro este archivo, como pueden ver, ahora está escrito true. Podemos usar esta función con condiciones IP. En el siguiente tutorial, vamos a aprender funciones relacionadas con cadenas. Así que gracias por ver este video, estad atentos para nuestro próximo tutorial. 14. Tutorial de funciones de cadenas de Sass Parte1: Hola chicos, me alegro de verte B. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CAS. Y en este tutorial, vamos a aprender la función de cadena CS. Aquí puedes ver la lista de función inval de SAS. En nuestros tutoriales anteriores, aprenderemos sobre la función numérica. Y en este tutorial, vamos a aprender funciones de cadena. Entonces veamos las funciones de cadena. Como puede ver, tenemos una función total de nueve cadenas en SAS. Función Cote a función mayúscula, función índice STR, a función minúscula, función inserción de estrella, función ID única, función Star len, función uncoat y función Star slice y Sin perder el tiempo, comencemos la práctica. Como pueden ver, estoy en mi coordinador de visual studio, y lado a lado, abro Stylar CS y archivo CSS estilo Entonces primero, voy a crear una clase, y el nombre de nuestra clase es la clase uno. Entonces dentro de lo surge, voy a usar la propiedad CSS, y nuestro nombre de propiedad es familia de fuentes. Familia de fuentes. Pero aquí no voy a usar el apellido de la fuente directamente. Para eso, voy a usar una función de cadena y nuestro nombre de función de cadena es co Quote. Entonces en cambio el paréntesis, voy a llamar al apellido de la fuente y nuestro apellido de fuente es Ariel Básicamente la función de código va a envolver esta cadena con códigos dobles. Si configuro este archivo, aquí puedes ver el resultado. Familia tipográfica dentro de los códigos dobles al. De la manera opuesta, tenemos otra función, que es uncode Si utilizo uncode y envuelvo este nombre de fuente dentro los códigos dobles y luego configuro este archivo, como puedes ver elimina la cita de la cadena Este es el caso de uso de la función uncode. Vamos a saltar a la siguiente función, que es dos mayúsculas Aquí voy a atar dos mayúsculas. Caso. Básicamente, esta función va a convertir esta cadena en mayúsculas Si configuro este archivo, como pueden ver, todas las letras están en mayúsculas la misma manera, tenemos función opuesta, que es dos minúsculas Si escribo dos inferiores, y luego configuro este archivo, como puede ver, convierte nuestra letra mayúscula A en una minúscula. Básicamente, convierte el carácter mayúscula en minúscula. Vamos a saltar a la siguiente función, que es la longitud de la cadena. Aquí quiero escribir nuestra siguiente función, que es St longitud. Longitud de str. Cualquiera que sea el valor de cadena que pasemos dentro de esta función de cadena, va a contar el carácter de la cadena y devolver la longitud en número. Como puedes ver en el mundo aéreo, tenemos un total de cinco caracteres. Si configuro este archivo, vaya, hay un error. La ortografía de la lente no es correcta, LONGITUD. Si configuro este archivo, puedes ver el resultado. Son tres y cinco. Este es el caso de uso de la función de longitud STR. Hablemos de nuestra siguiente función, que es el índice de cadena. Voy a llamar a esta función índice de cadena. Luego dentro del paréntesis, en esta función como primer parámetro, necesitamos pasar esta cadena Ya copio una cadena y la voy a pegar aquí. Es un maniquí de La Mpsum. Pero al principio, comencemos con la palabra wrap. Usando esta función, podemos buscar caracteres o palabras de esta cadena y se escribe el número de índice. Como puedes ver, como primer parámetro, pasamos esta cadena. Entonces en nuestro segundo parámetro, quiero buscar la palabra ficticio Dentro de los acordes dobles, voy a pasar a Dummi. Si configuro este archivo, como pueden ver, está escrito 23. Está escrito el número índice del texto dammi. Si cuentas los personajes, D sería 23, déjame mostrarte otro ejemplo. Ahora quiero buscar palabra Lorem de la corriente. Entonces voy a escribir Loren. Si configuro este archivo, como pueden ver, está escrito uno porque palabra Lem empieza desde el primer índice. Por eso está escrito uno. Recuerda, también es contar el espacio entre las palabras. Esto es para este tutorial. En nuestro próximo tutorial, voy a cubrir la función de inserción de cadena, la función QQ ID y la función de rebanada de cadena Gracias por ver este video, estad atentos para nuestro próximo tutorial. 15. Tutorial de funciones de cadenas de Sass Parte2: Hola chicos es bueno verte de vuelta. Esta es la segunda parte de SAStringFunctions. Y en este tutorial, vamos a aprender la función de inserción de cadena, la función ID única y la función de rebanada de cadena. Entonces, sin perder el tiempo, estudiemos lo práctico. Como pueden ver, dentro la visera estofado coeor abro nuestros Estiliza tu archivo CS y estiliza tu archivo de tesis. Supongamos que quiero insertar una palabra dentro de esta cadena. Para eso, necesitamos usar la función de inserción de cadena. Así que aquí, voy a escribir string insert. Quiero agregar hola palabra. Entonces aquí, voy a escribir hola. Quiero agregar hola palabra inicio de esta cadena. Para eso, necesitamos pasar otro parámetro. Entonces aquí voy a escribir coma, y aquí voy a pasar el número de índice Uno, también, voy a proporcionar un espacio en ese lugar. Y también, voy a proporcionar espacio después de O. Así que si configuro este archivo, se puede ver el resultado. Usando la función Insertar, podemos insertar palabra o un carácter dentro de esta corriente, y necesitamos pasar el número de índice. Eso es. Déjame mostrarte una vez más. Supongamos que esta vez quiero agregar palabra Ipsum en esta corriente Copo esta palabra y la quito, y aquí voy a pasar la palabra Ipsum Y ahora quiero insertar palabra Ipsum hasta uen. Para eso voy a contar índice exacto número uno, dos, tres, cuatro, cinco, seis. Entonces aquí, voy a pasar Sebin porque también quiero proporcionar un espacio arriba uen Entonces si configuro este archivo, se puede ver el resultado Lorem Ipsum Entonces este es el caso de uso de la función insert. Hablemos de nuestra próxima función. Nuestra siguiente función es string slice. Así que aquí voy a escribir STR slice. Supongamos que quiero reducir la palabra Lorem de esta cadena. En ese caso, tenemos que pasar al parámetro dos. Déjeme mostrar. En nuestro primer parámetro, necesitamos pasar nuestra cadena, y en nuestro segundo parámetro, necesitamos pasar el número de índice. Como puede ver, la palabra Lorem termina en quinto índice. Entonces aquí, voy a pasar seis. Si configuro este archivo, ahora lo puedes ver quitar Lem palabra e imprimir es simplemente dammitexto Pero en nuestro siguiente ejemplo, quiero devolver una palabra. En ese caso, necesitamos pasar el parámetro total de tres, nuestro número de índice inicial y nuestro número de índice final, que es nueve. Si configuro este archivo, como pueden ver lo devuelve es. Entonces, usando esta función, podemos rebanar cualquier sección de nuestra cadena. Hablemos de nuestra última función, que es el ID único. Al principio, voy a eliminar todos estos, y aquí voy a escribir Unique ID. DNI. Entonces nuestro paréntesis y semicon dos en esta línea Si configuro este archivo, como pueden ver, está escrito un ID único. Devuelve algunos caracteres aleatorios. Si configuro este archivo de nuevo, cada vez que se escribe un nuevo ID, y Bt fold siempre esta función escribió nueve caracteres de identificación única. Básicamente, utilizamos esta función con condiciones IP. Cubro todas estas funciones de cadena. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 16. Tutorial de funciones de color de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial emocionante relacionado con CS. Y en este tutorial, vamos a aprender las funciones de color CS. Como te dije antes, CS vino con algunas funciones inval. Función de número, función de cadena, función de colores, funciones de lista, función de elector y función de introspección Completamos la función de número y la función de cadena en nuestro tutorial anterior. En este tutorial, vamos a aprender la función del color. Sin perder el tiempo, veamos cuántas funciones de color tenemos en nuestro CAS. En este tutorial, vamos a cubrir las funciones básicas pero importantes de CS, Aclarar, oscurecer, ajustar, saturar, desaturar, mezclar Sé que tenemos más de siete funciones relacionadas con el color en SAS, pero estas son las más importantes. Por eso voy a cubrir estas siete funciones. Entonces comencemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi Visual Studio Coreator y mi navegador usando la extensión de servidor if Ya creé un documento HTML llamado index dot HTML. Con eso, ya creo Style Door CS y el archivo CSS con estilo Como puedes ver en mi navegador, tenemos que hacer dos D, clase uno y clase dos. La clase uno se llenó de color de fondo rosa, y la clase dos vino con el color de fondo vacío. Vamos a saltar al archivo CS y ver qué hemos hecho. Como puedes ver, al principio, creamos un color base variable de las extremidades, y nuestro color base es el rosa. Y luego diseñamos nuestros dips y establecemos un borde. Entonces en nuestra clase uno, establecemos el color de fondo, que es nuestro color base rosa, y no establecemos ningún color de fondo en nuestra clase dos. Ahora voy a modificar este color y quiero llenar este div con la forma oscura de este color rosa. Para eso, voy a usar una función llamada darken. Entonces primero, voy a usar la propiedad CSS, que es fondo. Antecedentes, y voy a llamar a nuestra función. Aquí voy a escribir oscurecer. Luego dentro del paréntesis, necesitamos proporcionar un color Para el color, voy a usar el mismo color, que es el color base. Voy a copiar la variable y pegarla aquí. Y luego en nuestro segundo parámetro, necesitamos aportar el valor 0-100% Entonces aquí quiero pasar el 30%. Entonces si configuro este archivo, aquí puedes ver nuestro contenedor lleno 30% más de corte oscuro que el anterior. Y si te muestro mi estilo o archivo CSS, como puedes ver, crea un nuevo color. Entonces una vez más, voy a volver a mi archivo de estilo o CS. Entonces como puedes ver, si aplico 30% de color oscurecido a este color base, devuelvo este tipo de De igual manera, si aplico 70% y luego configuro este archivo, se puede ver la diferencia. Ahora son diez colores más oscurecidos. Te muestro dos deeps porque este es el color original y esta es la parte oscurecida de Este es el caso de uso de dark in function. Nuestra siguiente función es la función de aligerar . Déjame mostrarte. Entonces primero, voy a duplicar esta línea y comentar la anterior. Y aquí voy a atar a Alighten. Y voy a pasar el 30% de valor aquí. Si configuro este archivo, como pueden ver, es 30% aligerar el color de nuestro color base Si te muestro mi archivo CSS, como puedes ver, está escrito en blanco puro porque nuestro color rosa ya es un color aclarado Si uso el color azul, déjame mostrarte el color base azul. Esto en este archivo, ahora se puede ver la parte de iluminación de este color azul. Y si te muestro el archivo CSS, puedes ver el código coloreado. Podemos usar esas funciones con Hova Effects. Hablemos de nuestra siguiente función, que es ajustar Hue. Primero, voy a duplicar esta línea y comentar la anterior, y aquí voy a escribir ajustar Hue. Tonalidad. Si configuro este archivo, como pueden ver, cambió el color. Básicamente usando esta función, sea cual sea el color que pasemos en nuestro primer parámetro, puede devolver parte oscurecida o aclarar parte de este color según este Y en nuestro segundo parámetro, necesitamos pasar valor con grado. Si paso 20 aquí, y luego configuro este archivo, se puede ver la diferencia. Es regreso no va a oscurecer la anterior. Si apruebo 70 grados, veamos qué pasó. Si configuro este archivo, vuelve a aclarar parte de este color. Usando la función H, podemos rotar colores. Entonces como se puede ver cómo podemos usar la función Hu. Hablemos de nuestra siguiente función, que es saturar. Al principio, voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir saturar. Básicamente, esta función aumenta el brillo de este color. Si configuro este archivo, puedes ver el resultado. Como puedes ver, sigue devolviendo el mismo color. Cambiemos el color. Aquí voy a usar un color marrón. Voy a proporcionar un valor hexadecal tiene AD 4038. Si configuro este archivo, ahora puedes ver la diferencia de color. Este es el color base y este es 70% saturado el color base. Aumenta el brillo de este color marrón y devuelve el color rojo. De igual manera, tenemos función opuesta, que es desaturada. Déjame mostrarte. Voy a duplicar esta línea y comentar la anterior aquí voy a escribir desaturate También voy a cambiar el color base, que es el azul. Si configuro este archivo, como pueden ver, esta función reduce el brillo de este color y devuelve este color. función saturada siempre aumenta el brillo de este color y la función de desaturación siempre disminuye el brillo de este Si reducimos el valor 20% y luego establecemos este archivo, ahora es tratar de coincidir con el color base. Pero si aumentas el valor 90% y estableces este archivo, ahora puedes ver la diferencia. Redujo el brillo de este color. Pero si paso valor cero, y configuro este archivo. Ahora se puede ver está escrito el color original, el color base, el color azul. Pero si uso valor completo, 100% y configuro este archivo, ahora se puede ver Itrton color gris solamente Ahora hablemos de nuestra próxima función, que es mix. Quiero oblar esta línea y comentar la anterior. Entonces aquí, voy a teclear mix. Usando esta función, podemos mezclar diferentes colores. En esta función, básicamente, necesitamos pasar el parámetro total de tres. Entonces con color base, quiero agregar, como pueden ver, nuestro color base es el azul. Quiero agregar color rojo. Entonces aquí voy a escribir rojo, coma, y luego tenemos que pasar el valor porcentual Entonces aquí voy a pasar el 50%. Significa cuánto color azul quiero agregar con el color rojo. Si configuro este archivo, como pueden ver, está escrito de color púrpura. Si mezclamos color rojo y azul, en ese caso, reten color púrpura I Disminuyo el valor porcentual, 20% y luego configuro este archivo, ahora se puede ver que devuelve color rosa rojizo Se aplicó 20% de color oeste a este color rojo. Si aumento el valor, 90% y luego configuro este archivo, ahora puedes ver el resultado diferente. Ahora puedes ver que nuestro nuevo color es mucho más fuerte que el rojo y está escrito casi de color azul. Esta es la forma en que se puede utilizar la función mixta. Ahora hablemos de nuestra función de lujuria, que es transparente muere. Voy a duplicar esta línea, y voy a comentar la anterior. Aquí voy a escribir lazos transparentes de fondo. Básicamente, usando esta función, podemos transparentar nuestro color. Si ya estás familiarizado con CSS, conoces el valor de GVA, y A significa Alpha Val, y podemos transparentar nuestro color usando el valor Alpha De igual manera, tenemos función en SAS, que es transparente sí. Aquí, tenemos que pasar por los dos parámetros, color y valor. Para el color, voy a usar nuestro color base, y aquí tenemos que pasar el valor 0-1 Entonces Hemo tipo punto cero, cuatro, quiero decir, es 40% transparente Vamos a configurar el archivo y ver si funcionó correctamente o no. Como puedes ver, es 40% transparente nuestro color de fondo. Y si te muestro mi archivo CSS, aquí puedes verlo usa valor Rgvia aquí puedes ver que está escrito Valor Alpha 0.6 Y si quiero que sea completamente transparente, en ese caso, necesitamos pasar el valor uno. Si configuro este archivo, ahora puedes ver que es completamente transparente. Pero si te muestro mi archivo CSS y comparo con el valor Alpha, aquí puedes ver que está escrito cero. En CSS para completa transparente, necesitamos usar cero, pero en SAS para completa transparente, necesitamos usar uno. Obviamente, es trabajo sólo para esta función. Esto es para este tutorial. Espero que ahora te quede claro qué son las funciones de color CS. Gracias por ver este video. En nuestro próximo tutorial, vamos a cubrir las funciones de CS List. Así que estad atentos para nuestro próximo video. 17. Tutorial de funciones de la lista de sass Parte1: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial emocionante relacionado con las funciones SAS. Y en este tutorial, vamos a aprender las funciones SSList Como te dije antes, tenemos que seis funciones en SAS, función número, función cadena, función color, función lista, función selector, y función de introspección En este tutorial, vamos a aprender la función de lista. Estas son todas en funciones wll. Pero antes necesitamos entender lo que es la lista. Si está familiarizado con JavaScript, entonces ya está familiarizado con las matrices. Array significa en una sola variable, podemos almacenar múltiples valores. Y si quieres hacer lo mismo en SAS, entonces tenemos Lista. Aquí puedes ver, primero tomamos una variable luego lista, y dentro de esta variable, nos fijamos para decir tres valores, cinco píxeles, diez píxeles y 15 píxeles. Este es el primer método que puedes crear último en SAS. Déjame mostrarte este segundo método. Aquí puedes usar separador entre los valores. Puedes usar coma Para que puedas usar valores sin coma. De lo contrario, puede usar valor con coma. Y hay otra manera de que puedas crear lista en CAS. Déjame mostrarte. Además, puedes usar direcciones cuadradas para crear una lista en CS. Y ahora te voy a mostrar la lista de funciones. Usando la función de lista, puede manipular su lista. Puedes agregar nuevo valor en tu lista. De lo contrario, puede eliminar un valor de esta lista. Puedes hacer muchas cosas usando esas funciones. Nuestra primera función es la función de longitud. De ahí viene la enésima función. A continuación, la función Seth N, función unión, AppNFunction, función, función de índice, menos función de separador, y nuestra última función es es la función entre corchetes Así que tenemos línea total menos función en CS y voy a cubrir todos estos en este tutorial. Sin perder el tiempo, es comenzar la práctica ver cómo se balancea. Por último, estoy en un codtor de estudio visual. Al lado del otro, abro archivo cs del estilete y el archivo css del punto del estilo Al principio, voy a crear una lista de nombres variable Dollar ist. Entonces dos puntos aquí, voy a establecer algunos valores. Cinco píxeles, espacio, diez píxeles, espacio, 15 píxeles. Después semicolum dos en esta línea. Ahora voy a crear una clase punto clase uno, luego dentro de la alirass entonces voy a llamar a una propiedad CSS, que es padding aquí voy a usar toda la función list una por una Llamemos a nuestra primera función de lista, que es la longitud. Entonces aquí voy a escribir longitud. Usando la función length, podemos contar número total de valor en nuestra lista. Si paso la variable am lista de dólares, y configuro este archivo, como pueden ver, está escrito rellenando tres porque tenemos que decir tres valores en nuestra lista. Si aumento el valor 20 píxeles y luego configuro este archivo, como pueden ver, está escrito cuatro. Como puedes ver, cuenta múltiples valores. Además si elimino el pixel de la unidad, déjame mostrarte y luego configurar este archivo. Como puedes ver escribió cuatro porque esta función es lo suficientemente inteligente como para identificar los valores. Por eso sin unidad, puede contar nuestros valores. Y si utilizo coma entre ellos y luego configuro este archivo, como pueden ver, ahora también está escrito cuatro porque podemos crear nuestra lista usando el espacio de lo contrario usando coma Volvamos a la posición anterior. Voy a presionar Control Z. no sólo eso, podemos pasar propiedad y valores en función de longitud Déjame mostrarte. Primero, voy a usar tirantes redondos Dentro de las llaves redondas, primero, voy a usar con propiedad con diez píxeles Además, voy a usar propiedad de altura. Altura, cinco píxeles. Si configuro este archivo, como pueden ver, es volver a sintonizar dos porque pasamos valor total dos en esta función, width y height Esta función es bastante asquerosa para identificar estos valores. Esta es nuestra función de longitud que puede contar nuestros valores de lista. Ahora hablemos de nuestra próxima función, que es NIT. Pero primero, voy a duplicar esta línea y comentar anterior voy a escribir NI. Básicamente, pasamos a dos parámetros en la función N. En nuestro primer parámetro, necesitamos pasar el valor de lista y en nuestro segundo parámetro, necesitamos pasar el índice. Déjame mostrarte. En nuestro primer parámetro, voy a pasar lista Lista de dólares. Y en nuestro segundo parámetro, voy a pasar el número de índice, así que voy a pasar dos. Si configuro este archivo, como pueden ver, está escrito diez píxeles. Ahora el cociente es la razón por la que está escrito diez píxeles. Porque como puedes ver en mi lista en el índice dos, tenemos un valor de diez píxeles. Por eso está escrito diez píxeles. Tenemos que decir cuatro valores en mi lista. Es mezquino que tenemos que decir cuatro índices en esta lista. En nuestro segundo parámetro, si paso el número de índice, acuerdo con el número de índice, devolverá el valor. De igual manera, si cambio el número de índice, cuatro y luego configuro este archivo, ahora se puede ver que devuelve 20. No sólo eso, podemos pasar valor negativo también. Si paso menos uno y luego configuro este archivo, ahora puedes verlo devolver 20 una vez más. Pero la pregunta es ¿por qué? Porque desde el lado izquierdo, contamos valores positivos. En el sentido contrario, contamos el valor negativo desde el lado derecho. Entonces este es nuestro menos uno, esto es menos dos, esto es menos tres, y esto es menos cuatro. Si paso menos tres, y pongo este archivo, se puede ver que está escrito diez. Para que podamos imprimir valor de esta manera, de lo contrario de esta manera. Ahora, hablemos de nuestra siguiente función, que es establecerla. Quiero comenzar esta línea y comentar la anterior. Si quieres agregar un nuevo valor a nuestra lista existente, en ese caso, puedes usar la función Seth Neh Aquí, voy a escribir Seth Ne set nth. Dentro de las prensas hacia abajo, tenemos que pasar tres parámetros. Primero, nuestra lista, después el número de índice, ¿dónde quieres establecer? Quiero ponerla en el índice dos. Por eso paso dos. En nuestro tercer parámetro, necesitamos pasar el nuevo valor, y nuestro nuevo valor es 30 EM. Aquí quiero sustituir diez píxeles por 30 am. Si configuro este archivo, puedes ver el resultado. Cinco píxeles, 30 am, 15 píxeles, 20 píxeles. Usando esta función, puede reemplazar un valor a su lista existente. Como puedes pasar valor menos aquí. Si paso menos uno y luego configuro este archivo, ahora se puede ver que reemplazó 20 píxeles con 30 am. Hablemos de nuestra cuarta función, que es Joan. Voy a duplicar esta línea y comentar la anterior. Aquí voy a llamar a Joan función. Usando la función conjunta, podemos unir múltiples listas y podemos crear una sola lista. Para eso, voy a crear otra variable, que es dos. Además, voy a cambiar esos varios de 50 píxeles, 100 píxeles, 150 píxeles y 200 píxeles. Aquí, tenemos que pasar dólar dos parámetro, Lista uno y Lista dos, Dólar, ist, coma, y nuestro segundo parámetro, tenemos que pasar nuestra segunda lista es dos, dólar, es dos Entonces, si configuro este archivo, puedes ver que está escrito una nueva lista, y tenemos un valor total de ocho en esta lista. Cinco píxeles, diez píxeles, 15 píxeles, 20 píxeles, 50 píxeles, 100 píxeles, 150 píxeles y 200 píxeles. Se puede ver que no hay coma entre estos valores. Básicamente, esta función se combinó para enumerar y escribió una nueva lista. Pero, ¿qué? Si usamos coma, en nuestra primera lista, déjeme mostrarle y en nuestra segunda lista, solo uso el espacio para separar valores Si configuro este archivo, como puedes ver en nuestra nueva lista, usó coma en toda nuestra lista para separar valores Además, podemos pasar otro parámetro en nuestra función conjunta, que está separada. Supongamos que no quiero una coma entre estos valores. En ese caso, en nuestro tercer parámetro, necesitamos pasar el espacio. Si configuro este archivo, como pueden ver en nuestra nueva lista, separa nuestro valor usando el espacio, no la coma Como puedes usar el valor automático, es el valor predeterminado. Entonces aquí estoy para escribir auto. Si configuro este archivo, ahora puedes verlo probado coma entre valores Pero si no utilizo coma en nuestra primera lista y luego configuro este archivo, por defecto, como pueden ver, es espacio escrito Separa nuestro valor usando el espacio. Pero ahora quiero separar este valor usando coma. En ese caso, tenemos que pasar coma aquí. Si configuro este archivo, ahora puedes ver que proporciona coma entre valores Entonces nuestro tercer parámetro significa separador. Esto es para este tutorial. En nuestro próximo tutorial, vamos a cubrir una función pluma, función zip, función índice, es función separadora, y e función entre corchetes Así que gracias por ver este video, mantente atento a nuestros próximos tutoriales. 18. Tutorial de funciones de la lista de Sass parte 2: Hola, chicos. Una vez más, estoy de vuelta en mi coordinador de visual studio, y como pueden ver, lado a lado, abro el archivo CSS de estilo SSPle y Stylo En nuestro tutorial anterior, aprenderemos sobre la función Length, función N, la función set N y la función join Pero en este tutorial, vamos a cubrir los restantes función APN, función Z, función índice, es función separadora, y su función de corchete Entonces, sin perder el tiempo, estudiemos prácticos. Al principio, voy a comenzar con la función APN. Entonces voy a configurar esta línea y comentar la anterior. Y aquí voy a escribir Append. Entonces nuestro latón redondo. Supongamos que si desea agregar un nuevo valor en la lista existente, en ese caso, puede usar la función AVN Supongamos que en nuestra primera lista, quiero agregar 30 píxeles hasta 20 píxeles. En ese caso, podemos usar esta función. Déjame mostrarte cómo. Esta función agrega un solo valor. En nuestro primer parámetro, necesitamos pasar la lista, que es la lista de dólares. Entonces coma y luego necesitamos pasar el nuevo valor, que es de 30 píxeles Si configuro este archivo, como puedes ver en el archivo CSS, está escrito de 30 hasta 20 píxeles. Está agregando nuevo valor en nuestra lista. Podemos agregar nuevo valor usando esta función. Además, tenemos un tercer parámetro que podemos usar como separados. Déjame mostrarte. Como pueden ver, nuestros valores están divididos por el espacio, así que aquí voy a usar nuestro tercer parámetro, que es la coma Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que nuestros valores están separados por. Puedes usar cualquier valor aquí, auto, espacio, Hablemos de nuestra siguiente función, que es la función Z. Voy a esta línea y comento la anterior. Primero, voy a inve este y voy a escribir Z. Básicamente esta función va a unir dos valores Quiero decir que tenía cinco píxeles con 50 píxeles, diez píxeles con 100 píxeles, 15 píxeles con 150 píxeles y 20 píxeles con 200 píxeles. Aquí, voy a pasar dos parámetros. Nuestro primer parámetro es la lista de dólares, y nuestro segundo parámetro es dólar es dos. Si configuro este archivo, puedes ver el resultado. Como puedes ver, combinó cinco píxeles con 50 píxeles, diez píxeles con 100 píxeles, 15 píxeles con 150 píxeles, 20 píxeles con 200 píxeles. Déjame mostrarte un buen ejemplo para esto. Aquí voy a tomar algún nombre de color. Dentro de las prensas redondas, voy a tomar rojo, verde y azul. Además, voy a tomar otra lista. Es que los rounders es para rojo, me voy a llevar 120 Para verde, voy a usar 255, y para azul, voy a usar 70. Si configuro este archivo, ahora puedes ver que el valor del color rojo es 120, valor del color verde es 255 y el valor del color azul es 70. Este es el buen caso de uso de la función zip. Si no usas coma para fines de separación, déjame mostrarte así que voy a revocar esta coma y voy a En ese caso, puedes quitar las llaves redondas. Si configuré este archivo, como pueden ver, también funcionó perfectamente. Entonces es totalmente en ti, estás cómodo con separador o no. Puedes usar Comma o espacio web. Hablemos de nuestra séptima función, que es el índice. Voy a suplicar esta línea y comentar la anterior. Y aquí voy a escribir index. Supongamos que desea buscar algo en su lista. En ese caso, puede utilizar la función index. Entonces como parámetro, al principio, necesitamos proporcionar el nombre de la lista, y nuestro nombre de lista es lista de dólares. En nuestro segundo parámetro, necesitamos pasar la Palabra clave, que quiero encontrar. Quiero encontrar 15 píxeles. Si configuro este archivo, como pueden ver, está escrito el número de índice. Encontré nuestra palabra clave en el índice tres. Si quito la unidad y luego busco el archivo, como pueden ver, también está escrito tres. Pero si trato de encontrar un resultado que no existe en esta lista, déjame mostrarte 40 y luego establecer este archivo. Como pueden ver, no está escrito nada. Si existe, entonces está escrito, lo contrario, no está escrito nada. Ahora, hablemos de nuestra octava función, que es ist separador. Entonces voy a duplicar esta línea y comentar la anterior, y aquí voy a escribir Separador de listas. Separador de listas. Separador de lista básicamente devuelve el nombre del separador. Aquí tenemos que pasar el nombre de la lista y luego va a devolver qué separador usamos en esta lista. Voy a pasar lista de dólares. Si configuro este archivo, como pueden ver, es espacio escrito. Entonces aquí puedes ver en nuestra lista uno, utilizamos el espacio para separar nuestros valores. Pero si uso coma en nuestra lista dos, y aquí pasamos la lista dos, y luego configuramos este archivo. Ahora puedes ver es título porque aquí usamos coma para separar nuestros valores Tenemos que decir dos tipos de separador, de lo contrario, el espacio. Y ahora voy a hablar de nuestra última función, que está entre corchetes Entonces voy a duplicar esta línea y comentar la anterior. Y aquí, voy a escribir está entre corchetes está entre corchetes. Básicamente, esta función vuelve al valor. Cierto, ya sea falso. Básicamente se va a comprobar ¿ usamos *** al cuadrado en nuestra lista o no Aquí voy a pasar nuestro nombre de lista, lista de dólares. Si configuro este archivo, ahora puedes ver que está escrito resultado falso. Pero si utilizo cuadrado *** en nuestra lista también, déjame mostrarte y luego pasar, y si paso es dos en esta función y luego configuro este archivo, como puedes ver, está escrito true. Básicamente, se nos utiliza esta función con la condición, y vamos a aprender sobre ella en nuestros próximos tutoriales. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender funciones seleccionadas. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 19. Tutorial de funciones del selector de Sass parte 1: Hola chicos, me alegro de verles. Una vez más, estamos de vuelta con un nuevo tutorial relacionado SAS. Y en este tutorial, vamos a aprender las funciones del selector SAS. Pero antes necesitamos entender lo que se selecciona. Aquí puedes ver dentro de la clase uno, tenemos ncatag dijimos hola y nosotros a nuestra etiqueta Anca, que está dentro de esta clase Nuestra etiqueta Anca es nuestro selector. Pero SAS proporciona alguna función inculta que puede manipular a nuestros Déjame mostrarte la función. Entonces como puedes ver, tenemos que siete funciones de selector en CS, selector siguiente, selector append, selector replace es super seleccionado, selectores simples, selectores unificar Avanzando e iniciando nuestra práctica. Aquí puedes ver que ya abro mi aplicación Kuala, y lado a lado, abro archivo CS estilo y archivo CSS estilo Al principio, borremos una variable en nuestro archivo CS. Dollar y se selecciona nuestro nombre de variable. Después colon. Al principio, te voy a mostrar cuál es el uso de la función selector nido. Aquí voy a teclear selector Lista. Básicamente, dentro de esta función de nido selector, pasamos total de dos parámetros, y ambos parámetros deben ser selector. Para nuestro primer parámetro, voy a tomar códigos dobles para nuestro primer parámetro, voy a usar L y para nuestro segundo parámetro, voy a usar I y luego Semgoron dos en esta línea Básicamente, esta función selectora va a crear nuestro primer parámetro parentag y hacer nuestro segundo parámetro child tag de nuestro primer parámetro Quiero decir que va a crear etiqueta UL, parentag y etiqueta LI tag child tag Se va a combinar tanto la etiqueta como crear una selección. Para aplicarlo, necesitamos crear una clase. Para eso, voy a usar el método de interpolación. Entonces primero, voy a escribir tiene etiqueta y dentro de los alias, voy a usar nuestra variable, que es selector, selector de dólar Entonces, sea cual sea el valor que tengamos en nuestra variable seleccionada, la va a pegar aquí. Dentro de esta función selectiva, voy a usar una propiedad. Puedes usar cualquier propiedad. Por ahora, voy a usar la altura. Pixel de tinte de altura. Vamos a configurar el archivo y ver qué obtenemos en nuestro archivo CSS. Si configuro este archivo, aquí se puede ver en el archivo CSS, crea UltagParnTag, y Litag child tag Combinó tanto el selector como el selector combinado Made. Básicamente, este es el uso de la función nido selector. Déjame mostrarte otro ejemplo de esta función. Voy a quitar este y establecer este doble código. Voy a tomar clase totter dos. Nuestra primera clase es XYZ y nuestra segunda clase es punto ABC. Y ahora voy a tomar nuestro segundo parámetro. Quiero usar coma y dentro del código de la torre. Nuestro segundo parámetro es la etiqueta P. Si configuro este archivo, aquí puedes ver en mi styler archivo CSS, aquí puedes verlo crear dos grupos diferentes de clases Primero, selecciona nuestra etiqueta de párrafo, que está dentro de nuestra clase XYZ, y luego, es seleccionar otra etiqueta de párrafo, que está dentro de la clase ABC. Si quieres usar la clase sudo, sí, puedes. Déjame mostrarte. Primero, voy a eliminar esta clase, y voy a usar solo la clase XYZ. Y luego en nuestra segunda sección de parámetros, voy a escribir N persona, colon, nuestro Psotoelector, Si configuro esta línea, aquí puedes verla usa el selector Ober con clase XYZ Aquí puedes ver si quieres agregar dos parámetros, para eso, necesitas usar N persona sine. Permítanme aclarar una vez más esta sección. Supongamos con XYZ, quiero agregar underscoe ABC. Déjame mostrarte entonces absoluta N persona underscoe ABC. Si configuro este archivo, aquí se puede ver, se crea una nueva clase XYZ subrayado ADC Esta fue nuestra primera función que es SelectNST. Hablemos de otra función que es selector apene Aquí voy a quitar SelectonNST y voy a escribir Del mismo modo, en esta función, necesitamos pasar al parámetro dos. Y esta función appen va a combinar ambos de este parámetro Déjame mostrarte. En nuestro primer parámetro, voy a usar la etiqueta de párrafo. En nuestro segundo parámetro, voy a usar una clase. Aquí voy a escribir punto ABC. La función de nido selector básicamente proporciona espacio entre dos parámetros. Pero en la función append, va a combinar tanto el parámetro Si configuro este archivo, puedes ver el resultado. Como puede ver, no hay espacio entre la etiqueta P y la clase ABC. Quiero decir que crea una sola selección. Su significa toda la etiqueta de párrafo con clase ABC, altura debe ser de 20 píxeles. Déjame mostrarte otro ejemplo. Supongamos que voy a usar la clase punto XY Z. En nuestro segundo parámetro, voy a usar guion bajo Copy Si configuro este archivo, como pueden ver, crea una nueva clase, XYZ undersco copy En nuestra función anterior, necesitamos usar N persona sine para unir estos dos parámetros. Pero en esta función, no necesitamos usar person sine. Ahora, permítanme modificar este selector y saltar un paso más allá. Super coopy voy a usar Coma, y aquí voy a escribir underscoimage Como puedes ver, en nuestro segundo parámetro, utilizamos dos nombres diferentes, copy undisco copy y underscoimage Puedes tomar cualquier nombre como desees. Yo configuro este archivo, como pueden ver, crea un total de dos selectores diferentes, XYZ underscoe copy, y XYZ underscoeimage Básicamente, combina nuestro primer parámetro con copy, y nuevamente, combina nuestro primer parámetro con image y crea dos selectores diferentes. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender sobre nuestros selectores restantes Gracias por ver este video, estén atentos para nuestro próximo tutorial. 20. Tutorial de funciones del selector de Sass parte 2: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estamos en mi editor de código de estudio de video, y como pueden ver, lado a lado, abro el archivo style dot cs, y el archivo CSS del estilete En este tutorial, continuaremos con la función selectora. Voy a iniciar este tutorial con selector RiplesFunction. Déjame mostrarte. Para eso, voy a escribir selector guión lugar. Es comprensible desde el propio nombre, reemplazará algo. En esta función, básicamente pasamos el parámetro total de tres. Supongamos que en nuestro primer parámetro, voy a pasar C punto XYZ. Este es el nombre de nuestra clase. En el segundo parámetro, tenemos que pasar el cual tenemos que reemplazar. Supongamos que quiero reemplazar la clase punto XYZ. Aquí voy a atar punto XYZ. Ahora en nuestro tercer parámetro, necesitamos pasar el nuevo valor, y aquí necesitas pasar el valor, quieres reemplazarlo por. Quiero sustituir punto yate por punto ABC. Si configuro este archivo, aquí puedes ver el resultado. Como puede ver, no hay nombre de clase c punto XYZ. Sustituye dot yate por punto ABC. Por eso pasó c punto ABC. Déjame mostrarte otro ejemplo. Si no hay una clase H, H una en nuestro primer parámetro, en ese caso, si configuro este archivo, como pueden ver, no reemplaza el punto XYZ con ABC. Es simplemente imprimir C punto XYZ porque esta función reples no puede encontrar H uno en nuestro primer parámetro Por eso imprime ADTs. Este es el uso de la función selector repres. Hablemos de nuestra siguiente función selectora, que es E superselector Aquí voy a empatar es superelector de guión. Básicamente, usamos el selector para fines de prueba, no el propósito de modificación, y está escrito solo uno con a través de cualquiera de las caídas, y para entenderlo, necesitamos pasar por los dos parámetros. En nuestro primer parámetro, necesitamos pasar un selector, pero llamamos a nuestro primer selector superselector Supongamos que nuestro súper selector es A, y llamaremos a nuestro segundo subselector de parámetros. Y en nuestro subselector, voy a pasar un punto, y además voy a establecer una clase X Y Z. Si configuro este archivo, va a devolver true Pero el cociente es ¿por qué? Porque esta función va a buscar nuestro super selector en nuestro subselector. Si existe superselector en nuestro subselector, en ese caso, está escrito true Vamos a establecer este archivo. Como puedes ver, está escrito a través del aire. Básicamente, utilizamos esta función con condición IP. Pero si sustituyo su posición, att XYZ. Si elimino XY de nuestro subselector, y el conjunto de este archivo, como puedes ver, está escrito cae porque este súper selector no existe en este subselector. Por eso está escrito cae. Este es el uso de super selector. Hablemos de nuestro siguiente selector, que es simple selector. Voy a quitar este y voy a escribir sencillo selector de guiones Usando esta función selectora, podemos dividir nuestros selectores Si pasamos selector combinado aquí, va a dividir los selectores. Déjame mostrarte. Supongamos que voy a pasar por aquí en ABC. Si configuro este archivo, aquí se puede ver que divide nuestros selectores Crea un selector A y otro selector de punto ABC. Este es el uso de selector simple. Esto es para este tutorial. En nuestro próximo Tutorial, voy a cubrir las funciones restantes del selector, selector unificar y selector extender Gracias por ver este video, Stu por nuestro próximo tutorial 21. Tutorial de funciones del selector de Sass parte 3: Hola, chicos. Me alegro de verte de vuelta. Este es nuestro tercer tutorial, relacionado con la función selectora de Sas. En este tutorial, vamos a aprender la función Unificar seleccionada y la función de extensión del selector Vamos a saltar al editor de código de Visual Studio y ver cómo podemos usar esta función. Al principio, voy a llamar a la función seleccionada de Unifi, selector Unify En esta función, tenemos que pasar total de dos parámetros. Supongamos que en nuestro primer parámetro, utilizo en la etiqueta anchor, y en nuestro segundo parámetro, voy a usar dot info. Básicamente, esta función intenta crear una coincidencia entre los dos parámetros. Si configuro este archivo, como puedes ver, crea una coincidencia y crea un nuevo selector, en info. Déjame mostrarte más ejemplo relacionado con esta función. Supongamos que en nuestro primer parámetro, voy a escribir ad active. Y en nuestro segundo parámetro, voy a pasar en info. Si configuro este archivo, como puedes ver, crea un nuevo selector, adt active dot info Lo que significa que va a seleccionar en la etiqueta de anclaje con active plus, de lo contrario clase info. Entonces se va a aplicar el CSS. Pero si paso a selector diferente, déjame mostrarte la etiqueta de anclaje en nuestro primer parámetro y H una etiqueta en nuestro segundo parámetro. Si configuro este archivo, como pueden ver, está escrito flecha porque no creó ninguna combinación entre dos parámetros. Este es el uso de la función Unificar. Hablemos de nuestra última función selectora, que es selector extend. Voy a quitar el selector Unify y ella voy a escribir extender Esta función también funciona como función unificada seleccionada. Básicamente, esta función intenta extender una clase e intentar crear un nuevo selector. Y en esta función, podemos usar el parámetro total de tres. Supongamos que nuestro primer parámetro es anchor dot info, y en nuestro segundo parámetro, voy a pasar la etiqueta Anger. A, y en nuestro tercer parámetro, voy a pasar un link de punto de clase. Entonces esta función, tratando de hacer coincidir el segundo parámetro con nuestro primer parámetro. Si encontraron una coincidencia, entonces imprime IA, y luego trató de crear combinación con punto de clase de enlace. Si configuro este archivo, como pueden ver, primero, se crea una combinación en info. Lo que significa que imprime tal cual porque encontró la etiqueta de ira en nuestro primer parámetro. Por eso imprime Asit es, entonces crea una combinación punto info punto L. Este es otro selector Esta función siempre crea una extraña combinación. Déjame mostrarte otro ejemplo. Ahora, en nuestro segundo parámetro, voy a pasar H una etiqueta, y en nuestro tercer parámetro, voy a pasar H etiqueta dos. Si configuro este archivo, como pueden ver, imprime nuestro primer parámetro tal como es, y no intenta extender nuestro selector. Porque no encontró ninguna coincidencia en nuestro segundo parámetro. Por eso no puede extender nuestro selector. Básicamente, no usamos esta compleja función selectora en nuestro proyecto, y la mayoría de las veces usamos la función selecto next, selector ApenFunction y la función selector repress en nuestro Esto es para este tutorial. En nuestro próximo Tutorial, vamos a iniciar funciones de mapa. Gracias por ver este video, quédate une para nuestro próximo tutorial. 22. Tutorial de funciones de mapas de Sass: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con un nuevo tutorial relacionado dice, y en este tutorial, vamos a aprender la función de mapa. Al principio, tratemos de entender qué es el mapa. En nuestro tutorial anterior, aprenderemos sobre la función de lista. Este es el ejemplo de la función list. Como puede ver, en una variable, decimos total tres el, diez, 20 y 30 píxeles. Como saben, podemos almacenar múltiples valores en función de lista. Del mismo modo, en nuestra función de mapa, podemos almacenar múltiples val. Pero el proceso es diferente. Déjame mostrarte. Como puedes ver, este es el ejemplo de la función map y decimos total dos valor aquí, 405 cien. Pero hay otro valor dentro de los códigos invertidos. Uno es regular y otro medio. Estas son las claves. Estas son claves de mapa y estos son valores. Su valor medio regular es 400 y el valor medio es 500. Como saben, en nuestra lista, tenemos índice. Ejemplo, nuestro índice de diez valores es uno, índice de 20 valores es dos, índice de 30 valores es tres. Usando index, podemos especificar la posición de este v. Usando su posición, puede obtener los valores. Si quieres extraer el tercer valor de índice, entonces es devolver 30 píxeles. Pero en los mapas, no utilizamos índices. Aquí utilizamos claves. Aquí podemos establecer un nombre diferente para nuestras claves. Este es otro ejemplo. Aquí puedes ver que usamos un nombre de color verde y para verde, usamos x valor disial. Del mismo modo, para el azul, use el valor decimal hexadecimal. También una función en nuestro mapa, similar a la lista. Y tiene alguna función inval también. Aquí puedes ver, tenemos a seis funciones de mapa diferentes, puerta de mapa, combinación de mapas, mapa eliminar claves de mapa, valores de mapa, y el último es mapa tiene. Vamos a cubrir todo esto uno por uno. Sin perder el tiempo, comencemos la práctica. Como pueden ver, ya abro mi aplicación Kuala. Ahora se puede ver lado a lado, abro archivo CS estilo y archivo CSS estilo. Al principio, voy a crear una variable y nuestro nombre de variable es fuente a ella, dólar, fuente espera. Después colon. Después de colon dentro de las prensas redondas , al principio, voy a crear nuestra llave y nuestra primera clave es regular. Con eso, voy a pasar nuestro primer valor y nuestro primer valor es 400. Entonces voy a crear nuestra segunda clave, que es mediana. Además, nuestro valor es 500 y nuestra última clave es audaz. Y el valor es de 700. Después Semgram a esta línea. Este es nuestro mapa, y ahora voy a usar este mapa. Para eso, voy a crear un sabor de punto de clase. Entonces dentro de la liss voy a usar un cuerpo CSS que es fuente Fuente wt. Ahora voy a llamar a nuestra primera función de mapa, que es map gate. Luego dentro de los vestidos redondos, tenemos que pasar nuestro nombre de mapa y el nombre clave. Como puedes ver, nuestro nombre de mapa es el peso de la fuente. Aquí voy a pasar el peso de la fuente. En nuestro segundo parámetro, necesitamos pasar la clave y para key, voy a pasar bool Dentro del doble curso, voy a pasar negrita. Si configuro este archivo, como pueden ver, nuestra fuente a él es 700. En la función de puerta Mp, necesitamos pasar a los dos parámetros, el nombre del mapa FonTuo y la clave Esta función siempre escrito valor de esta clave, como ustedes saben, nuestro valor clave mundial es 700. Pero qué pasó si paso diferente clave que no existe en esta función de mapa. Aquí voy a pasar huesos. Si configuro este archivo, como pueden ver, está escrito nada porque no hay huesos de nombre clave. Si la clave es existir, entonces la función de puerta de mapa escribió la b. Ahora, hablemos de nuestra siguiente función, que es clave de mapa. Aquí voy a teclear clave de mapa. En la función Mp keys, necesitamos pasar al parámetro one, solo el nombre del mapa. Si configuro este archivo, como pueden ver, está escrito toda la clave de este mapa. Nuestra primera clave es regular, o la segunda clave es media, y nuestra tercera clave es negrita. Este es el uso de la función Mapey. Está escrito el nombre de todas las llaves. Hablemos de nuestra siguiente función, que es map ils. Entonces aquí, voy a pasar ls. También es palabra como función de tecla de mapa. Si configuro este archivo, como pueden ver, su retorno todos los valores. Y aquí necesitamos pasar solo un parámetro como claves. Esto es para este tutorial. En nuestro próximo Tutorial, voy a cubrir las funciones restantes, combinación de mapas, eliminación de mapas y clave hash de mapa. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 23. Tutorial de funciones de mapas de Sass parte 2: Me alegro de verles chicos. En este tutorial, vamos a cubrir las funciones de mapa restantes, Fusionar mapa, eliminar mapa y mapa haski Volvamos a la visera Editor de código de Studio. Por último, estamos en Visu Studio Code Editor, y vamos a comenzar con la función de combinación de mapas Esta función va a fusionarse para diferir un mapa y devolver un mapa. Entonces necesitamos crear otro mapa. Para eso, voy a tomar una variable, y nuestro nombre de variable es ligero. Peso. Después del punto y coma, dijiste los vestidos redondos, nuestro primer kinome es más ligero, y nuestro valor es 100 y nuestro segundo kinome es li y el valor es 300 y punto y coma a la Ahora voy a usar la función de combinación de mapas. Aquí voy a escribir map merge. Y si paso otro parámetro, como ustedes saben, en esta función, necesitamos pasar al parámetro dos. Aquí, voy a pasar otro parámetro, que es otro mapa, es decir, al peso. Copo el nombre de la variable y lo voy a pegar aquí. Pero no hay problema. Si configuro este archivo, va a devolver flecha. Déjame mostrarte. Si configuro este archivo, como pueden ver, está escrito flecha porque función de combinación de mapas devuelve un nuevo hombre, no un valor. Por eso no podemos imprimirlo directamente como valor. Necesitamos crear una nueva variable para almacenar este nuevo mapa. Déjame mostrarte. Voy a crear una combinación de nombres de variables. Y ahora voy a llamar a esta función. Voy a cortar esta función de este lugar, y la voy a pegar aquí. Básicamente, esta función se fusionó a mapas y escribió un nuevo mapa, y ahora voy a llamar a MapKisFunction Aquí voy a escribir claves de mapa. Y aquí tenemos que pasar nuestra nueva variable Mug. Aquí voy a pasar Mug. Si configuro este archivo, como pueden ver, es devolver todas las claves de nuestro nuevo mapa. Como puede ver, primero imprime regular mediano en negrita desde el frente hasta el mapa húmedo, y luego imprime el mapa más ligero y ligero de Ligero a húmedo Este es el uso de la función Merch del mapa. Hablemos de nuestra siguiente función, que es map remove. No podemos llamar directamente a la función Map remove. Del mismo modo, necesitamos crear variables, así que voy a duplicar esta línea, y voy a cambiar el nombre de la variable. TheMve. Y aquí voy a llamar a map remove function, map, remove. En esta función, necesitamos pasar el parámetro total de dos. En nuestro primer parámetro, necesitamos pasar el nombre del mapa. En nuestro caso, font a él, pero en nuestro segundo parámetro, necesitamos pasar el nombre de la clave. ¿Qué llave quiero quitar? Supongamos que quiero quitar la tecla negrita. Entonces aquí voy a atar atrevido. Y si llamo a nuestra nueva variable remove en nuestro selector de prueba, y luego configuro este archivo, como puede ver, sentarse en clave regular y media solamente. Elimino la tecla negrita. Entonces este es el uso de la función remove. Básicamente, pasamos el nombre de la clave que queremos eliminar. Ahora, hablemos de nuestra última función, que es la clave hash de mapa. Entonces aquí, voy a escribir Map hash key. Básicamente, esta función de retorno al tipo de valor cae ya sea true. En esta función, necesitamos pasar al parámetro dos. Entonces como primer parámetro, voy a pasar pesos de fuente, y como nuestro segundo parámetro, tenemos que pasar el kiname voy a pasar tecla negrita Si la clave bol en existe en nuestro mapa fontt, entonces está escrito true Así que vamos a establecer el archivo. Como se puede ver, está escrito cierto. Pero si paso mal nombre de clave, más audaz y luego configuro este archivo, como pueden ver, está escrito falso Entonces este es el uso de la función de clave hash de mapa. Entonces esto es todo para este tutorial. En nuestro próximo tutorial, vamos a aprender dice función de introspección Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 24. Tutorial de funciones de introspección de Sass: Hola chicos me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender la función de introspección SAS Ya aprendemos sobre la función numérica, la función de cadena, la función color, la función de lista, la función de selector, la función de mapa. En este tutorial, vamos a cubrir la función de introspección Veamos cuántas funciones tenemos en la función de introspección Como puede ver, tenemos seis funciones totales en la introspección Básicamente, la función está utilizando condiciones. Y siempre se escribe valor booleano a través de otras fallas Empecemos lo práctico y tratemos de entender cómo podemos usar estas funciones. Aquí puedes ver que estamos en visual studio editor de código y lado a lado, abro style dot cs file y style dot css file. Como puedes ver en nuestro archivo CS de punto de estilo, ya creamos alguna variable num variable, variable char, list variable, map variable. Con eso, creamos una mezcla en el radio del borde del nombre. También crea una suma de nombre de función. Como puedes ver en nuestra variable num, guardamos 15 píxeles y en nuestra variable char, guardamos un stream, roboto En nuestra variable de lista, creamos una lista usando múltiples valores, 15 píxeles, 25 píxeles, 30 píxeles, y en nuestra variable de mapa, creamos un mapa. Al principio, voy a crear una clase donde voy a comprobar nuestra función de introstección punto sabor Dentro de la cali resis, voy a usar una propiedad CSS, que es padding. En primer lugar, voy a comenzar con la función de existir variable. Aquí voy a escribir variable existir, y aquí tenemos que pasar el nombre de la variable. Básicamente, usamos esta función con condiciones p y está retten true o false Esta función va a verificar si el nombre de la variable existe en este archivo, entonces va a devolver true. De lo contrario, va a devolver falso. Comprobemos la variable. Aquí voy a pasar dólar o variable nombre es mapa. Si configuro este archivo, se puede ver, vaya, tenemos que quitar el signo de dólar y luego establecer este archivo Ahora puedes ver que está escrito verdadero. Si paso un valor que no existe en nuestro archivo, en ese caso, déjame mostrarte mapas y luego establecer este archivo, como puedes ver, está escrito falso. Déjame mostrarte una cosa. Como puede ver, revisamos nuestra variable de mapa. Pero si corté esta variable de mapa de este lugar y la pego dentro de este selector, y luego configuro este archivo, como puedes ver, también es devolver true porque si las variables existen en cualquier parte de nuestro archivo, en ese caso, va a devolver true. Estas son nuestra variable global, pero ahora el mapa es nuestra variable local. Vamos a saltar a otra función que es variable global existir. Déjame mostrarte. Aquí voy a escribir la variable global existo. Si configuro este archivo, va a devolver false. Déjame mostrarte. Como puedes ver, está escrito falso, pero puedes ver nuestra variable de mapa existe en nuestro archivo. Entonces, ¿cuál es el problema? Porque nuestra variable de mapa ya no es una variable global. Ahora es variable local. Ahora nuestras variables globales son la variable num, variable char y la variable list. Si paso num aquí y luego pongo este archivo, como pueden ver, ahora está escrito true. Ahora, vamos a saltar a otra función que es mix in exist. Aquí voy a escribir mix in exist. En esta función, necesitamos pasar un nombre de mezcla. Aquí voy a copiar el nombre de mezcla del radio del borde, y lo voy a pegar aquí. Si configuro este archivo, como pueden ver, está escrito verdadero. Pero si elimino radio y luego configuro este archivo, como pueden ver, está escrito cae. Del mismo modo, tenemos otra función que es la función existir. Si la función existe en nuestro archivo, en ese caso, va a devolver true. Función Si paso el nombre de la función y nuestro nombre de función es sum y luego configuro este archivo, como puedes ver, está escrito true. Vamos a saltar a nuestra quinta función, que es type off. Aquí voy a escribir tip off. En esta función, básicamente pasamos una extremidad variable. Aquí tenemos que pasar la cal variable. Por error, configuré este archivo, por eso está escrito en este error y nuestra variable lima es lista de dólares. Si paso esta variable y configuro este archivo, como pueden ver, está escrito nuestro tipo de variable, que es lista. De igual manera, si paso char variable de miembro y luego establecer este archivo, aquí se puede ver escrito cadena. Nuestro tipo de variable char es cadena. Esta función siempre escribe tipo variable. Ahora, vamos a saltar a nuestra última variable que está en escupimiento. Aquí voy a escribir en escupiro. No encuentro ningún uso adecuado de esta función porque es impresa como es Vail Si configuro este archivo, aquí lo pueden ver sentarse en Roboto. Solo lo usamos para fines de inspección. Si paso el último aquí y luego configuro este archivo, como se puede ver imprima nuestro menos como es. Creo que no es una función muy importante. Esto es para este tutorial. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 25. Tutorial de directiva de Sass @content: Hola chicos es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, en este tutorial, vamos a aprender directivas de contenido SAS. Ya aprendemos sobre la mezcla SAS en nuestros tutoriales anteriores. Usando la mezcla, podemos crear un cono reutilizable. Podemos usarlo como funciones. Como puedes ver, creamos una mezcla llamada radio BDI, y en su lugar la mezcla, como puedes ver, utilizamos diferentes propiedades para diferentes navegadores Aquí usamos prefijo. Para Chrome, utilizamos web ket. Para Mozilla, usamos mose luego uso el radio de borde de propiedad real Como puedes ver, también establecemos el valor. Siempre que necesitemos llamar a la mezcla en nuestro selector, entonces necesitamos pasar el valor como parámetro. Como resultado en nuestro archivo CSS, está escrito así. Radio de borde de cinco píxeles. A partir de aquí, podemos pasar múltiples valores. Pero a partir de aquí, no podemos pasar ninguna propiedad CSS. Supongamos que quiero establecer el estilo de borde usando esta mezcla, pero no es posible a través esto y para resolver este problema, SAS introduce los viajes directos de contenido. Básicamente, lo usamos para enviar datos extra sin mezclar valor. Quiero decir con este valor, podemos enviar datos extra. Déjame mostrarte el ejemplo. Como puedes ver, usamos nuestra misma mezcla, pero aquí usamos directivas de contenido. Para eso, necesitamos escribir en el contenido rojo. Lo que sea que lo pasemos va a incrustar con estas VLTs es la forma de enviar datos a esta directiva Como puede ver, llamamos a nuestro radio de borde de mezcla y establecemos un valor de cinco píxeles. Después de eso, usamos tiss dentro del caliss que necesitamos para pasar los valores de directiva Estilo de borde, guión Estos son nuestros datos de directivas de contenido. Si configuro este archivo, va a devolver este código CSS. Después del radio de borde, se establece el estilo de borde das. Como puede ver, pasa nuestros datos adicionales después del radio fronterizo. Empecemos la práctica y veamos cómo podemos usarla. Como puedes ver, estamos en el editor de bacalao Leo de mi usuario, y lado a lado, abro Stylod CS y el archivo Styload CSS Ya creo una mezcla llamada border radius, BD radius. Y también, a esto lo llamo mezcla en nuestro selector. Y aquí puedes ver el resultado en nuestro archivo CSS. Y ahora quiero mandar datos extra con esta mezcla para eso necesitamos usar Cali Races. Y aquí voy a pasar el estilo de borde, así que tipo, borde, estilo de borde, dst. Como puedes ver, enviamos datos extra a través de esta mezcla. Pero si quieres imprimir los datos extra en la mezcla, para eso, necesitas usar directivas de contenido. Para eso, necesitamos escribir en el contenido rojo. Si configuro este archivo, como pueden ver, ahora es print boda style dans, enviamos los datos extra a través de las directivas de contenido Ahora podemos enviar múltiples propiedades a través de esta mezcla. Déjame mostrarte otro ejemplo. Esta vez, voy a enviar selector completo a través de estas directivas de contenido. Para eso, voy a comentar todas las líneas. Aquí voy a crear una nueva mezcla a la velocidad mezclando nuestro nombre de mezcla es sabor. Dentro del calicis, voy a usar solo directivas de contenido, agregar la tarifa contenida Para usar esta mezcla, voy a escribir incluir, agregar la tarifa, incluir nuestro nombre de mezcla es sabor. Después dentro del calicis, al principio, voy a tomar un selector y nuestro nombre seleccionado es la clase uno Clase uno, luego dentro de la resistencia Cali, voy a usar un color de propiedad Color y así aquí puedes ver usando esta mezcla, vamos a pasar el selector completo con propiedades. Si configuro este valor, como puedes ver, crea una clase punto clase uno y dentro de esta clase uno, estableces un color de propiedad. Y para ejecutar este contenido extra, utilizamos directivas de contenido. Déjame mostrarte otro ejemplo cómo podemos usar directivas de contenido. Supongamos que nuestro selector de clase uno está dentro del ID uno, para enviar este contenido dentro del ID, podemos usarlo de esta manera. Déjame mostrarte. Quiero establecer un IDH DAG y nuestro nombre de identificación es hombres. Entonces dentro de la cali resis, voy a pasar este contener. Voy a cortar este contenido y lo voy a pegar aquí. Si configuro este archivo, como pueden ver, se puso el contenido de directiva dentro del ID del Menú. Por eso imprime Menú primero. Podemos usar directivas de contenido de esta manera también. Ahora el menú se convierte en selector padre y la Clase uno se convierte en selector secundario. Déjame mostrarte otro ejemplo uso de directivas de contenido. Voy a comentar estas líneas. Al principio, voy a crear un botón selector de botón de punto. Después dentro de la alyss primero, voy a usar la propiedad border Borde un píxel. Voy a usar borde sólido, hijo y quiero color de borde. Al mismo tiempo, quiero crear un selector de Hober para este botón Aquí voy a llamar a una mezcla, que no la creo. En el rojo incluir. Incluya y nuestro nombre de mezcla es Hober. Son los alias, voy a establecer border con border con border con border con dos pixel Ahora voy a crear el nombre de mezcla Her. Aquí voy a escribir en la mezcla roja. Mezcla de hover. Después dentro de los calibrados, voy a crear un selector Posito para nuestra clase Para eso, necesitamos usar signo persona en persona columna Hoger Después dentro de los cálices, voy a pasar el contenido a la tarifa contenido Usamos este signo de persona porque necesitamos crear el selector Her usando el botón. Si configuro este archivo, como pueden ver, primero, crea selector de botones, y luego crea botón Su selector, y Boden con es nuestros datos de contenido extra Esto es para este tutorial. En nuestro próximo tutorial, vamos a aprender más sobre ello . Gracias por ver este video, estad atentos para nuestro próximo tutorial. 26. Tutorial de directivas de Sass @content 2: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con las directivas de contenido. Como puedes ver, ya estamos en mi editor de código de Visual Studio, lado a lado, abro Style lot, archivo cs y archivo Styllod CSS La mayoría de las veces usamos directivas de contenido con media query. Déjame mostrarte un ejemplo con media query. Para eso, voy a comentar todos los códigos anteriores, y aquí me voy a llevar una etiqueta corporal. Después dentro del alyss, quiero establecer un color de fondo Antecedentes. Fondo gris. Y ahora voy a crear tres media query diferentes. En la pantalla media roja, y dentro de los versos redondos, voy a usar MaxWppty max W quiero establecer max Después dentro de los alias, voy a pasar un selector y nuestro nombre de selector es body Voy a usar el mismo selector y la misma propiedad. Por eso voy a copiar esta sección y pegar dentro los alias aquí voy a establecer el color de fondo rojo Entonces, cuando nuestra resolución de pantalla coincide con esta consulta de medios, entonces establece nuestro color de fondo rojo, y ahora voy a crear otros dos media query para diferente resolución. Entonces voy a duplicar esta sección, y aquí voy a establecer 1,000 píxeles. Quiero decir color de fondo azul. Azul. Así que a 1.000 píxeles corona de Brasil fijó nuestro color de fondo azul De nuevo, voy a establecer otra consulta de medios. Entonces voy a duplicar esta porción, y aquí voy a decir 800. A 800 píxeles, quiero decir color de fondo verde. Aquí voy a escribir verde. Este es un método CSS normal. Si configuro este archivo, aquí puedes ver el resultado. Como puedes ver en nuestro archivo CSS, se imprime tal como está, pero ahora voy a usar directivas de contenido para quading de medios Para usar directivas de contenido, necesitamos crear una mezcla. Al principio, voy a crear una mezcla a la velocidad mezclar en. Quiero usar esta mezcla en para la pantalla de medios. Por eso voy a establecer la mezcla de nombres de medios. Entonces dentro de los vestidos redondos, voy a pasar un parámetro, y nuestra variable de parámetro es llorar Dentro de los alorss voy a pasar este código, pantalla de medios Copia este código y voy a pegarlo aquí. Aquí voy a pasar por encima con variable. Dólar. Entonces dentro de los calibrss voy a usar directivas de contenido, a la tasa contenida Después punto y coma dos en esta línea. Si quieres usar esta mezcla, necesitas incluirla. Pero primero, voy a comentar líneas, las consultas mediáticas. Ya no necesito esto. Ahora voy a incluir esta mezcla con Incluir QR, a la tarifa incluyen. Y nuestro nombre de mezcla es media. Luego dentro del paréntesis, necesitamos pasar el valor Como puede ver, nuestro primer máximo es de 1,300 píxeles. Aquí voy a pasar 1,300 px. Después dentro de las calibraciones, aquí voy a pasar nuestro contenido adicional para directivas de contenido Nuestro primer seleccionado es el cuerpo. Dentro del Calibrass quiero decir fondo. Antecedentes. Tarifa. Como puede ver, utilizamos resolución total de tres pantallas multimedia, 1,300 píxeles, 1,000 píxeles y 800 píxeles Quiero duplicar esta sección dos veces. Aquí quiero pasar 1,000 pixel. A 1,000 pixel, quiero decirlo color de fondo azul. Azul. En nuestra última plusvalía de meteorito, quiero pasar 800 Valor Max con 800 y aquí quiero establecer el color de fondo verde. Si configuro este archivo, como pueden ver, se asienta sobre el mismo resultado. Imprimo tal como es. Pero esta vez no necesitamos usar media query word varias veces. Pasamos nuestro contenido a través de directivas de contenido, y ya creamos una mezcla para consultas de medios. Desde la sección include, puede cambiar el tamaño de la pantalla. Supongamos que voy a pasar 700 píxeles. Si configuro este archivo, como pueden verlo configuro nuestra media query 700 pixel. No solo eso no solo eso, puedes pasar múltiples propiedades. Déjame mostrarte. Con antecedentes, quiero decir frontera. Borde de dos píxeles. Sólido. Y nuestro color de borde es el blanco. Voy a configurar este archivo, y aquí se puede ver el resultado. Ahora en 700 píxeles, fijó nuestro color de fondo verde. También establece un borde sólido con color blanco. Este es el mejor uso de las directivas de contenido. Espero que ahora te quede claro. Así que gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 27. Tutorial de directivas de Sass @media: Hola chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con el nuevo tutorial relacionado SAS. En este tutorial, vamos a aprender directivas de medios SAS y a verdaderas directivas. Tratemos de entender qué son las directivas mediáticas. Aquí puedes ver una clase llamada container, y decimos container con 1,100 píxeles y centramos nuestro contenedor usando margin Si creamos mediaquery usando CSS, en ese caso, necesitamos usar mediaquery Puedes ver, establecemos un punto de interrupción en 1,150 píxeles y dentro de esta media query, establecemos un ancho de contenedor 900 Cuando el ancho del navegador alcanzó 1,150 píxeles, necesitan reducir el ancho de nuestro contenedor de 1,100 píxeles a 900 píxeles Como sabe, para fines de respuesta, necesitamos crear múltiples puntos de interrupción para diferentes tamaños de pantalla Necesitas crear mucha media query. Además, necesitamos escribir el ancho del contenedor cada vez. Innecesariamente, necesitamos establecer el ancho del contenedor varias veces Para resolver este tipo de problemas dice introducir directivas de medios. Para usar la directiva mediática, podemos manejar esta situación. Entonces veamos cómo podemos usarlo y reducir nuestras líneas innecesarias. Entonces como puedes ver, finalmente, estamos en mi editor de código de Visual Studio, y lado a lado, abro estilo Dot CS archivo y estilo punto archivo CSS. Ya abro mi directorio CSS en nuestra aplicación Koala. Entonces primero, voy a crear una clase, y nuestro nombre de clase es contenedor. Después dentro de la cali resis, voy a establecer contenedor semana 1,100 pixel También, voy a establecer Margen. Margen, quiero centrar el contenedor, así que voy a usar cero pixel. Además, voy a usar Auto vil y ahora quiero establecer diferentes media query para diferentes puntos de interrupción, pero vamos a escribir menos código en cese Dentro de los alias, voy a crear la moneda mediática al ritmo media Pantalla de medios, y dentro del proceso redondo, voy a establecer el punto de interrupción Voy a escribir guión máximo con 1,150 píxeles. Entonces este es nuestro primer punto de quiebre. Entonces a 1,150 píxeles de ancho, quiero reducir el ancho del contenedor Para eso, no necesitamos volver a escribir contenedor, necesitamos escribir con propiedad. Ancho 900 píxeles. Como puedes ver, su uso anidando metanfetamina De igual manera, voy a crear otros dos puntos de quiebre. Entonces voy a conseguir esta sección dos veces. Aquí, voy a establecer max con 950 píxeles. A 950 píxeles de ancho del navegador, quiero establecer el ancho del contenedor 700 píxeles. Como puede ver, no necesitamos usar el selector de contenedores todo el tiempo. Del mismo modo, a 700 píxeles de ancho, quiero establecer contenedor con 500 píxeles. Básicamente, se puede ver en mi archivo CS, trabajamos con un solo selector. Pero si configuro este archivo, como pueden ver, es crear un total de cuatro selectores diferentes. Como puede ver, nuestro primer selector es nuestro contenedor, y otros tres selectores son nuestros puntos de interrupción En SAS, si usamos en medios dentro de la sección de contenedores, lo llamamos nombres directos de medios. Aquí puedes ver la diferencia. En nuestro archivo CSS, cada vez dentro de la pantalla de medios, se crea selector de contenedor. Después dentro del selector de continuer, ajusta el contenedor que Pero en nuestro archivo cs, si usamos directivas de medios, no necesitamos usar selector continuo una y otra vez. Este es el uso de directivas de medios. Tratemos de entender nuestras próximas directivas, que está en la raíz directiva. En nuestros tutoriales anteriores, aprenderemos sobre el anidamiento SAS Y aquí se puede ver el ejemplo de anidación. Como puedes ver, hay una clase padre dentro del vaso padre, tenemos una clase infantil, y también tenemos una clase secundaria secundaria y etiqueta cortada. Como puede ver en nuestra etiqueta padre, configuramos con 1,100 píxeles, y en nuestra etiqueta hijo, establecemos el color rojo, y en nuestra etiqueta subsecundaria, establecemos el color rosa Si compila este archivo, va a devolver este código CSS. Como puede ver, crea un total de tres selectores diferentes selector parent selector parent y child selector, también crea parent child y subchild selector Como puedes ver, es innecesariamente crear una etiqueta padre en nuestro archivo CSS Pero no quiero que los padres sean seleccionados cada vez. Podemos eliminarlo usando SAS. Para resolver este problema, SAS introdujo en equipos directos de raíz. En el siguiente tutorial, vamos a aprender cómo podemos usarlo prácticamente. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 28. Tutorial de directivas de Sass @at root: Me alegro de verles chicos. En este tutorial, vamos a aprender en las directivas raíz. Como se puede ver, lado a lado, abrí estilo punto archivo CS y estilo punto archivo CSS. Al principio, voy a crear un grupo de anidación. Al principio, voy a tomar un punto de clase para padres y nuestro nombre de clase padre es IM. Entonces dentro de los versos cali, voy a usar la propiedad CSS y nuestro nombre de propiedad CSS es de color, de color verde. Entonces dentro de esta clase padre, voy a crear otra clase. Quiero crear una subclase y nuestro nombre de subclase es item per item rapper Entonces dentro del caliss voy a usar la propiedad CSS y nuestra propiedad CSS es color Color rojo. Entonces voy a tomar otro selector en nuestro envoltorio de artículos, que es imagen. Imagen dentro de los carbones voy a tomar con propiedad, nosotros, nosotros, Entonces fuera de este envoltorio de artículos, voy a tomar otra clase. Quiero crear otra subclase de este ítem, y nuestro nombre selector es dot item child Entonces dentro del calss voy a usar un fondo de propiedad CSS Fondo rosa. Si configuro este archivo, como puede ver, se crea automáticamente al cuarto selector. Nuestro primer selector es para nuestro artículo, y nuestro segundo selector es para envoltorio de artículos y nuestro tercer selector es para imagen, que está dentro del envoltorio de artículos. Nuestro último selector es item child select. Ahora, si notas puedes ver, es repetir el artículo de vidrio cada vez. Ahora decides que no quieres clase de artículo para esta porción, para el rapero de artículos y para nuestra imagen. Para resolver este problema, SRS introduce directivas en la raíz Es necesario escribir aquí en directivas raíz. Aquí voy a escribir al rojo en tropa. Entonces empiezo Calibass necesitamos cerrar esta clase después de etiqueta de imagen Aquí voy a cerrar el cis y después voy a poner este archivo. Como puedes ver en mi archivo CSS, elimina elemento de nuestro selector. Aquí puedes ver que no hay ningún elemento de nombre de clase. Es artículo de impresión, imagen de rapero de artículo, pero en nuestro selector de nosotros, puedes volver a ver la clase de artículo. Este es el uso de directivas en la raíz. Básicamente, se trata de nombres de selector innecesarios. Espero que hayas comprendido el punto. Déjame mostrarte otro ejemplo de directivas at root. Para eso, voy a comentar esta sección, voy a configurar este archivo. Al principio, voy a tomar un medio en los medios publicitarios, nuestro nombre de medios es impreso. Entonces dentro del Caliss voy a tomar una clase punto item Lepper Después dentro del caliss, voy a tomar otro selector, y nuestro nombre de selección es item Entonces dentro de los cálices, voy a usar la propiedad CSS y nuestra propiedad CSS es color, color leído Si configuro este archivo, puedes verlo imprimir nuestros medios. Y dentro de esta impresión seleccionas artículo por artículo. Después dentro del caliss imprime color rojo. Pero si te das cuenta, puedes ver que no hay ninguna propiedad CSS en nuestra clase envolvedora de artículos. Esta propiedad es de clase de elemento, pero también es seleccionar este selector, envoltorio de elementos. Pero no quiero este selector de envoltorio de artículos. Si queremos eliminar esta clase envolvedora de elementos, entonces necesitamos usar en directivas raíz. Et yo te muestro. Después del envoltorio del artículo, necesitamos escribir en las directivas rojas en la raíz. Entonces tenemos que iniciar nuestro Calibase también tenemos que terminar con este Calibase después Si configuro este archivo, como pueden ver, se quita el elemento rapero y ahora es seleccionar solo la clase de elemento. Como puede ver, seleccione directamente el selector de artículos. Ignora el selector de envoltorio de elementos, lo cual es completamente innecesario porque no hay propiedad CSS dentro de la clase contenedora de elementos. Espero que ahora le quede claro. Una cosa que hay que recordar en las verdaderas directivas vienen con predefinidas y lo llamamos sin. Déjame mostrarte el ejemplo de cómo funciona. Al principio, voy a quitar estas líneas, envoltorio de artículos. Entonces dentro de la prensa impresa, aquí voy a tomar una clase y nuestro nombre de clase es contenedor. Y dentro de la Cliivess aquí voy a tomar 22 propiedades Nuestra primera propiedad es con 130 píxeles. Además, voy a tomar otra propiedad que es de color, color leído. Creamos esta tesis con fines de impresión. Si alguien intentó imprimir la página, entonces va a imprimir nuestro contenedor con 130 píxeles y color leído. Pero en nuestro sitio web real, no quiero este color y nosotros. Para esto, aquí voy a usar nuestras directivas at root. En la lectura en la raíz. Dentro de los cálices aquí voy a usar las mismas propiedades Pero aquí, voy a cambiar los valores. Para nosotros, voy a usar 100 pixel y para el color, voy a usar el verde. Es malo si alguien intentó imprimir nuestra página web, necesita devolver 130 píxeles con y color rojo. Pero en nuestra página web, a través de 100 píxeles y color verde. Ahora voy a usar el valor predefinido de las directivas at root. Dentro de los vestidos redondos, voy a pasar sin, sin y aquí tenemos que pasar un valor llamado media. Es mezquino, también forma parte de la clase contenedor, pero sin medios. Después de establecer este archivo, se puede ver el resultado. Como pueden ver, nuestros medios impresos trabajan este punto hasta este punto y después de eso, imprimen sin medios. Este es nuestro sitio web CSS y este es nuestro CSS impreso. Espero que ahora te quede claro en el siguiente tutorial, vamos a aprender directivas de control. Gracias por ver este video, estén atentos para nuestro próximo tutorial.