Da los primeros paso

1. Introducción: Al principio, eso era CSS, y hay que escribirlo una línea a la vez, como si las computadoras nunca se hubieran inventado. Si quieres hacer correcciones, fue como tener que pasar por todas las páginas con White out en la derecha en el reemplazo, como si no se hubieran inventado las computadoras. Me llamo Rob, y tuve miedo de unirme a la evolución también. Pensé que si aprendía sass, tendría que aprender la línea de comando. Y pensé que estaría fuera poniendo código feo como solías conseguir en Dreamweaver cuando usas el editor de Wiz E Week. manera fantasiosa, me equivoqué. Y durante las próximas dos horas te estaré mostrando por qué te estaré mostrando cómo escribir hojas de estilo más sencillas. Estarán limpios y magos. Estarán actualizados y actualizados 9. Variable: Entonces te mostré variables justo al inicio de la intro cuando sé que obviamente te estás muriendo por apoderarte de ellas y tener una jugada con ellas porque te da tanto, tanto control. Entonces, solo vamos a crear una variable aquí arriba. Vamos a crear las variables, la parte superior del documento, y luego vamos a poder usarlas en otro lugar. Entonces aquí tengo familia de fuentes. Helvética. Bueno, ¿qué tal si solo nos divertimos uno y luego en cualquier lugar que use ese mismo fondo y solo pones esta pila de fuentes aquí y se va a decir todo para asegurarnos de que si alguien no tiene salud que está en su computadora, son los cuatro de vuelta a Ariel Y en caso de que lo sepan, incluso tienen que se ajusta a cualquier sensor divertido. Ahora, esto obviamente va a darle a ese enganche un infierno que puede. Ya sabes ahora, en realidad, me gusta bastante que todo en mi sección tenga la misma familia de frente. Entonces, solo vamos a bajar esa disección humana también. Obviamente podría simplemente ponerlo en el cuerpo, pero supongamos que vamos a estar usando otros fondos en otro lugar del documento. Entonces ahora mismo es solo odio a Juan y sección y lo recargo. Y ahora obviamente está cargando. Familia Font sostuvo esa canoa en todo esto. Ahora, obviamente, una gran ventaja a esto es que solo podría cambiar esto en un solo lugar si necesitara cambiarlo. Y asumiendo que esto va a crecer como proyecto, puedo tener esto como un archivo externo con muchos archivos CSS diferentes corriendo de él. Entonces si toda la marca cambió ligeramente su fuente, entonces podemos simplemente cambiarla en un solo lugar y las hojas de estilo de todos correrían de la misma cosa. Entonces aquí estoy usando algunos colores bastante horribles porque Aiken, no me funcionó algunas cosas quizás un poco más bonitas. A lo mejor habría sido si nos vamos por una especie de 33377 Algo así tal vez sería un poco más agradable. Pero en lugar de resolver eso, acabo de poner en la palabra azul. Sólo cosas CSS básicas. Escojamos algunos colores diferentes. En cambio, digamos digamos que vamos a tener un bonito color verde y el verde va a ser . Iban a usar eso y luego más tarde donde se pone verde, acabamos de poner lo real dice Grave. Vamos a hacer eso verde. De acuerdo, entonces vamos a tener un bonito color amarillo también. Ese trasfondo. ¿ Podría quizá ser un poco? No, señor. Entonces vayamos con algo un poco más bonito que haya tenido este. Y luego aquí abajo ponemos amarillo. Yo sólo voy a hacer ser variable aquí. Por lo que la variable se puede notar porque tiene un signo de dólar al inicio y luego vamos reemplazar ese rojo también, solo necesita un letrero de libra al frente. De acuerdo, y luego volvamos esto donde dice rojo aquí, hagamos esa variable también. Por lo que acaba de tener un letrero de dólar al frente para que puedas ver ahora lo similar que dice para uno con signo de dólar. Ahora dice rojo con signo de dólar. Y eso es sólo completarlo como variable. Por lo que ese conocido ahora sabe ir mirar la parte superior del documento y ver cuál es el color del rojo para seguro. Eso y yo refresco esto. Se puede ver que tenemos ojos ligeramente diferentes colores en ahora, 11. Operaciones: Lo siguiente que tenemos que ver es ¿qué podemos hacer con estos números? ¿ Cómo podemos? ¿ Cómo podemos alterarlos? Todo el propósito de tener funciones es que podamos hacer algunas matemáticas básicas o algunas matemáticas complicadas con nuestra con nuestros números. Entonces aquí tenemos una variable, y de momento tiene una cadena en ella que dice operaciones nupciales. Pero voy a estar alterando esto a lo largo de este video on. Vamos a estar mirando el CSS por aquí. Entonces esto es un CSS. Eso es salida, y esta es la SAS que va a entrar. Entonces, vamos a deshacernos de esto un segundo. Y tratemos de agregar uno con uno. Y como ves, eso está actualizado y lo es también. Por lo que obviamente podríamos tener. Si tuviéramos 10 más uno , van a ser 11. Si tuviéramos 10 menos uno , obviamente serían nueve. Es un cinco por segundo. Si uso este símbolo de Astra, se va a veces. Entonces eso es 50. Y si uso el Ford Slash, lo va a dividir, OK, pero hay un poco más en él que eso, porque qué pasa si estamos tratando con píxeles. Si escribo píxeles por aquí, me está dando un error. Ya ves lo que pasa es que SAS quita la denominación. El argumento que está a la izquierda de la ecuación ha sido la denominación para toda la ecuación. Entonces si, por ejemplo, si tenía P x a la 10 y luego guardarlo de nuevo está apareciendo aquí es un dos. Si le quito el P X de los cinco y lo guardo de nuevo, aún cállate es a ahora tiene el PX. Lo que queremos es que quieras que el ítem de la izquierda sea el tipo de denominación o cadena que queremos estar usando. Entonces, por ejemplo, si escribo una cuerda aquí y luego, um, um, además de que a cinco se va del dedo del pie, agrega cinco como un mechero de cuerdas. Ahora, si te vas, los rápidos pedacitos de matemáticas que deberíamos saber es ¿qué pasa si dividimos cinco por tres, entonces qué pasa? Bueno, obtenemos 1.66667 Tal vez no queramos este enorme número ahí dentro. Eso va a ser quizás bastante complicado. A lo mejor queremos redondear hacia arriba o hacia abajo. Por lo que hay una función incorporada llamada round. Nos van a utilizar en algunas de estas funciones. Bastante parte de nuestro flujo de trabajo SAS. Entonces vamos a acostumbrarnos a ellos. Si no quieres una ronda a la más cercana vienes vuelta a la puedes redondear hasta el techo y eso te va a dar un dos o te vuelves al piso, que te redondeará hacia abajo al siguiente número abajo, lo cual me está dando uno. Alternativamente, la otra, que es bastante útil, es tal vez quieras devolverla como porcentaje, y eso me va a dar 166% porque cinco es 166% de descuento tres. 15. Mezclados: De acuerdo, entonces ahora vamos a hablar de mix ins. Mix ins son un poco como variables, pero podrías incluir ligeramente mawr. Propiedades diferentes ligeramente más diferentes en su interior. Es como reutilizar un bloque de este código como si fuera una variable. Entonces echemos un vistazo a esta página aquí. Tengo dos tipos de encabezados y tengo el texto del cuerpo en el texto del enlace. Ahora, verdad, los encabezamientos realmente tienen esos es el mismo frente. Entonces aquí arriba tengo una familia de frente, que es Helvetica, y todo son fuentes san serif. Y tengo otro, que es un fondo mono espaciado. Ahora creo que rumbo a también debería ser la Helvética nueva, y debería tener algunas de las mismas características que la del fondo principal H one. Entonces, en realidad, ¿sabes qué? Copiemos todo este bloque de código aquí y peguemos arriba con las variables y anidemos todo esto dentro de algunos corchetes y vamos a llamar a esto mezcla y vamos a usar el signo al principio y luego justo mezclar. Voy a pie dirigiéndome Diversión es justo lo que estoy llamando a esta mezcla. Es muy similar a cómo estas variables tienen nombres diferentes cuando estamos nombrando a nuestras variables o a nuestra mezcla ins justo mientras no tengamos ningún carácter especial más que guiones y subrayados Andi. Idealmente, no los empieces con números. Simplemente la mejor práctica y con algunos lenguajes de programación, no funcionará. En tanto nos apegemos a esas reglas, podemos llamarles lo que queramos. Entonces aquí abajo en Hetch uno, sólo voy a escribir. Incluya, y voy a escribir encabezando pie. Y si digo eso, eso debería funcionar Bien. Yo refresco esto verá que esto no lo ha cambiado todo. Esto sigue teniendo todo este estilo, que he separado de la H one tachuela. Entonces vamos a incluir encabezar la diversión en nuestro odio a qué es? Entonces ahora tenemos el mismo tipo de estilo, pero es un poco conflictivo porque en realidad, el odio en el odio de tener ambos consiguió casi el donde tienen exactamente los mismos estilos, así que tal vez odian debería ser un poco más pequeño. Entonces lo que podemos hacer aquí es igual que con las funciones, como con aclarar y oscurecer, que tengo pagando ahora, igual que como pasamos en estos dos argumentos y dijimos: ¿De qué color? ¿ En qué por ciento? Queríamos pasarlo. Podemos pasar el argumento al frente de cabecera. Entonces saquemos el tamaño frontal de aquí y pasemos eso en es un argumento. Por lo que ahora dice incluir encabezamiento frente y luego entre paréntesis. Entonces le va a decir a E n, Pero si es un rumbo al tamaño, va a decir 1.6 a la mía no le gusta eso. De acuerdo, así que ahora sólo vamos a subir aquí a donde dice de frente, y lo vamos a hacer en esta variable de aquí. Entonces esto de aquí está pasando. Un argumento encabezando frente está pasando las 2 de la mañana y aquí está pasando otro argumento encabezando frente 1.6. Por lo que esto se va a convertir en una dure variable ing el alcance de esta mezcla. Si llamo a este tamaño de fuente aquí arriba, esto se vuelve similar a una variable pero una variable que sólo podemos usar dentro de la mezcla. Y luego aquí abajo, voy a decir tamaño de fuente. Entonces cuando refresqué esta página, esto se va a recargar con esto. Ha sido de tamaño frontal dos AM en este siendo un tamaño de fuente apagado 1.6 años. Entonces la razón aquí es porque esto crea una nueva variable dentro de la mezcla en, que solo sobrevive siempre y cuando esta mezcla en sobreviva. Y lo he usado aquí para el tamaño, y lo pasé adentro. Cuando he creado cuando he incluido eso lo hace, espero que todo tenga sentido. Si no lo hace, entonces por favor escríbeme en los comentarios. Entonces supongamos que tenemos muchos encabezamientos, que en realidad son 1.6, que en realidad son 1.6, tal vez algunos de nuestros diferentes encabezamientos a lo largo de un 1.6. Entonces tal vez deberíamos crear un respaldo completo y solo decir, Si no hemos pasado ahí ningún valor, cualquier valor, hagámoslo 1.6 e m. y entonces simplemente podemos quitar esto de aquí. Yo quiero Esto es Stone es esto decir si no se pasa un valor cuando se hace el include , solo dale tamaño de fuente el valor de 1.6 cm. Entonces si saco a las 2 de la mañana A partir de aquí, va a asumir que quiero que el encabezamiento uno sea 1.6 C y De igual manera, si aún pongo aquí un valor diferente, se va a sobreescribir ese 1.6. De acuerdo, entonces hubo una mezcla ings. Espero que te diviertas mucho creando algunos de esos. 16. Incluir: Ahora, si empezamos a agregar demasiados de estos mixtos ins, vamos a conseguir un estilo muy, muy ocupado. Las sábanas en la parte superior tienen todas estas en ella. Y también, podríamos tener una hoja de estilo en algún otro lugar donde queramos tener las mismas esquinas redondas en el mismo estilo de fuente de encabezado. Entonces no queremos estar repitiéndonos. Queremos que todo sea compacto y sea más simple posible. Entonces vamos a copiar estos fuera y crear un nuevo archivo bajo nuestra carpeta S S S s tienda de mezcla fría F CSS. Y aquí solo pondremos todos nuestros mix ins en uno en una lista. Ahora, eso es genial. Pero obviamente esta estrella que necesita Teoh importar todos esos mix y aun así Así en el lugar donde tenemos los mixtos ins, solo voy a escribir importación, Y luego voy a escribir mezcla estrella S, C. S s y punto y coma en el extremo. Y esto ahora importará todos esos mix ins on permiten que se utilicen en esta página no ve que no haya ninguna diferencia. Y si miramos nuestra hoja de estilo, sigue trayendo todas esas reglas sin crear ningún código extra para tener esos mix ins. Pero si miramos atrás en nuestra carpeta CSS ahora, realidad es obviamente compilado todos los archivos F CSS. Por lo que ahora tenemos uno llamado mix en las tiendas. Sí, si un CSS de punto, que está vacío porque no hay salida, solo es solo mix ins que ese código devuelva, pero podemos sortear esto si solo agregamos. Acabo de cerrar esta mezcla ya que sentí. Si acabo de encenderlo subrayé el inicio, entonces se quita esos archivos de fieltro. Pero esto sigue importando bien aquí. Si refresco los pasos de página que encuentras, sigue importando el archivo, aunque debería tener un subrayado al frente. Este hombre de importación simplemente lo ignora, pero cuando esté compilado, asumirá que el archivo no existe o no queremos crear. Se trata de un archivo CSS por lo que podríamos volver a hacer esto. Podríamos crear algunos. Podríamos crear otras importaciones aquí arriba, llamarlo variables y crear un nuevo archivo con variables debajo de la escuela. CSS. Y podríamos simplemente copiar estas variables de aquí en esta página todavía deberían cargarse absolutamente bien. Sigue trayendo esas variables. Sigue trayendo esos mix ins, pero no los está compilando. Y es mantener esta nave estelar muy, muy simple, muy limpia. Y nos permite reutilizar estas mismas hojas de estilo, las mismas variables s CSS y mix y zesty assis en todos los demás archivos a lo largo del proyecto. 17. Expansión: De acuerdo, tengo una creada una regla completamente nueva aquí llamada Link on the Algunos nuevos estilos ahí para link que tiene es jalando en este aire esquinas redondeadas se mezclan para darle esta esquina se tiene algo de relleno y algún margen. Tiene color y tiene algo divertido uno y en el fondo. Ahora, tengo algunos otros enlaces aquí arriba que en realidad no tienen clase. Si miramos en Index, podemos ver que estos no tienen clase, pero aún así quise tener este mismo estilo exacto. Entonces vamos a un poco Vamos a extender esta clase de enlace en el A. Déjame mostrarte a lo que me refiero. Entonces aquí tenemos el artículo A así que solo va a seleccionar cualquier enlace dentro de un artículo, y voy a escribir extender y luego justo a la derecha, Doc Link. Entonces lo que esto está haciendo es que esto va a traer todas las clases existentes en enlace. Entonces si digo eso y refresco esto, ahora vemos que estos enlaces tienen exactamente el mismo estilo. ¿ Esto se acaba de extender? Que yo era particularmente interesante sobre extender es si ahora miro en mi estilo CSS. Ella verás que aquí está escrito en Sección Enlace, que era la regla original. Eso se trata de esto y luego de la sección Artículo A, que es la regla. Hagamos que esto tenga su estilo, y luego se ponga todos los mismos estilos en ese mismo lugar. Y si yo también waas, tenía un color diferente. A lo mejor yo diga Color verde. Después se ha ido y se añade este extra todo el fondo que sólo cambia el color. Pero todo eso aún se mantuvo unido. Ahora por qué esto es interesante para nosotros es lo que notarás si miras hacia atrás en la hoja S CSS . Es ahí donde hemos usado incluir, y hemos incluido una mezcla en. En realidad se recrea el mismo código cada vez. Entonces aquí, pesar de que el radio fronterizo que queríamos ser exactamente el mismo radio fronterizo, se ha ido adelante y agregó ese chunkin otra vez, ¿dónde está aquí? Es solo común lo separó y puso ese código ahí una vez. Por lo que esto es un poco más eficiente en imprimirlos dos veces. No, considerando esta mezcla, y en realidad se necesitan algunos argumentos en el tamaño de fuente. Entonces esa sigue siendo una mezcla válida. Pero éste en realidad no está haciendo esto ningún favor. Entonces si sacamos eso de la mezcla y la página en, lo volvemos a meter en esta página, voy a saber, hacer esquinas solo sean algunas reglas normales de éxito como si las esquinas fueran un objeto. Pero en lugar de poner a un médico delante de él o una etiqueta hash como si fuera una clase sobre I D, voy a poner un signo de porcentaje. Lo que esto significa es que mi archivo CSS no va. Teoh está poniendo algunos errores en este momento porque está intentando. Teoh está tratando de leer esto aquí, así que si solo extendo esto en su lugar, así que extendo y he escrito el letrero presentado en las esquinas escritas, así que eso debería extender esa multa y luego un aquí, dice, incluir esquinas Voy a escribir, extender esquinas. Entonces ahora si miro en esta forma, verás que hay un arma que es buena. Ahora verás que en realidad se sacó a los tres de estos y dijo que todos estos tienen un radio de borde de cinco píxeles. En lugar de poner esas mismas tres líneas en tres lugares diferentes a lo largo de la hoja, acaba de añadirlas en un solo lugar, lo que podríamos volver a hacer esto por relleno un margen que tenía lo mismo aquí como están aquí y crear una regla completamente nueva y luego extender esas. Entonces solo para recapitular una mezcla es una función en la que queremos poner algún tipo de argumento. Entonces no es el mismo código cada vez, mientras que, y una clase que extendemos va a ser algo con reglas rígidas donde éstas siempre van a ser las mismas. Siempre va al mismo radio fronterizo, y eso va a mantener nuestra hoja de estilo lo más pequeña posible. 18. Qué es el Compass: por lo que antes, hablamos de Compass porque estábamos hablando de la aplicación de brújula. Ahora esta es la APP, ya que sabemos que está viendo archivos CSS de R. C S y compilándolos a CSS a medida que avanzamos. Pero Compass es también una extensión de SAS, que ofrece un montón de funciones extra y mezclas ins que podemos incluir en nuestro trabajo. Ahora, mientras tengamos brújula arriba observándonos, tenemos acceso a esos. Si no estamos usando vienen poseídos, hay app de brújula alterna. Hay alternativas, y por favor pregúntame si te gustaría ver esas o tenemos que hacer si queremos usar Compass ahora es que tenemos que decir importar brújula en la parte superior, y esto importará todas las bibliotecas de brújula. En realidad hay cinco subbibliotecas diferentes de Compass, y hay una tipografía de utilidades, CSS tres layout y read y reset. Ahora bien, si solo brújula blanca va a importar en realidad esas mejores utilidades libres tipografía y CSS tres. Y realmente no diría esto ninguna ventaja en conocer la diferencia a menos que estés hasta que estés mirando funciones muy específicas, vas a querer saber en cuál está. Pero si estamos importando estos es muy parecido cuando importamos son variables o nuestro mix ins. En realidad no es poner nada en forma de estilo hasta que lo decimos. Con una excepción, éste de aquí se restablece. Si digo importaciones, restablece la brújula, acabamos de poner ese semi cono en el extremo, y luego miro mis hojas de estilo. En realidad tiene todo este trozo de código extra en, y cuando refresque mi página, verás que sí me golpea cosas extrañas y se restablece. Para cualquiera que no sepa es una cosa que a menudo es un archivo CSS, incluirías a Teoh eliminar cualquier peculiaridades o diferencias diferentes entre diferentes navegadores. Entonces si elimino el margen y el relleno en la frontera de todas estas cosas, entonces definitivamente van a lucir igual en todos los navegadores. Y puedo agregar esos estilos de nuevo en, como y cuando los necesito por lo que es eliminar estilos de lista. Está quitando ciertos estilos de mesa, estaba haciendo todo lo más simple posible, y está fuera poniéndolo aquí Ahora. Yo recomendaría usar un archivo de reset porque obviamente te va a ayudar a desarrollar estilos que funcionen de forma transversal en diferentes navegadores. Pero si querrías usar brújula es reiniciar las hojas. O tal vez querrías usar normalizar. O aquí hay algunos otros. Encontré el vapor de odio o cinco Dr CSS. Hay una Yahoo que es bastante popular. Selector Universal. Reset es bastantes aire Restablecer CSS de Eric Meyer. Hay algunas hojas de reinicio diferentes, y es posible que no quieras usar la brújula. Uno. Te recomendaría decidir qué archivo de reset quieres usar tú mismo y dejarlo fuera. Ahora bien, en cuanto a la disposición uno. No te va a hacer daño tenerlo ahí. Lo mismo con las tres utilidades originales. Tipografía CSS tres. Entonces dejémoslos ahí dentro. Y entonces lo que esto hace es que esto nos da acceso a cientos más de funciones mixtas a las que ya no teníamos acceso. Por ejemplo, estamos aquí extendiendo esquinas esto, pero en realidad no necesitamos esto porque todo esto ya está construido en Compass. Entonces, en lugar de extendernos, incluyamos y las funciones llamadas medias de radio de borde en sólo cinco píxeles a la derecha aquí. Si guardo eso, solo refresca la página. Y como verás, los eslabones aún tienen esquinas redondeadas. Entonces si solo uso eso aquí abajo está bien, donde tenemos esquinas extendidas y entonces podemos simplemente quitar eso en realidad. Y como pueden ver, todavía tenemos todas nuestras esquinas redondeadas, que si quisiera, podría entonces cambiar la cantidad, y puedo hacer que éstas tengan esquinas mucho más severas. Y por supuesto, si quisiera, también podría usar una función de brújula ligeramente diferente llamada Border Corner Radius. Y lo que esto hace es que me permite agregar argumentos extra, a diferencia de la parte superior izquierda en mis enlaces. Ahora acaba de llegar a la vuelta de la esquina en la parte superior izquierda. No es particularmente bueno botón, pero como puedes ver esto mucha más funcionalidad, y ahí y otra vez, la cantidad de funcionalidad y mix ins ahí dentro es enorme, y no pudimos posiblemente cubrirlos todos. Entonces voy a aconsejar que echen un vistazo a un perro estilo brújula, que tendrá una lista fuera de todas las funciones disponibles, y voy a añadir un enlace a esto en el video. A lo largo de los siguientes videos. Te mostraré un par de ejemplos, pero ahí de vez en cuando va a haber algo que quieras hacer, y vale la pena ver si hay una función existente aquí antes de ir y crear la tuya propia. 19. Ejemplo de sombras de la caja de Compass: De acuerdo, Así que sólo voy a mostrarles otro ejemplo rápido. Si miras la parte superior aquí, acabo de importar toda la carpeta de brújula. Acabo de decir brújula de importación. Por lo que la última vez tuve un par de diferentes como CSS tres así. Pero en realidad, si solo importamos toda la carpeta, tenemos acceso a todos los todos los mixtos ins y función. Entonces por el bien de aprender sobre la brújula, eso es sólo importarlos todos. Ahora voy a añadir un poco de sombra de caja alrededor de este artículo. Entonces si tengo razón, incluye cuadro Shadow Eso va Teoh importar todas las todas las diferentes reglas CSS para diferentes navegadores y cosas para tener un boxeador. Entonces voy a hacer que la sombra verde la haga dos píxeles, dos píxeles de desplazamiento con un desenfoque de 10 píxeles en esto nos va a dar esta esta sombra de caja alrededor este bloque. Ahora eso parece un poco extremo, en realidad. Entonces en realidad quería luces en este verde un poco, pero no quiero a Teoh y yo era una luz en él. Yo quería ser más transparente porque podría haber un color diferente en el fondo , así que obviamente haríamos esto con algo como RGB A en CSS y ahora obviamente para hacer rgb necesitas los valores RGB. Pero en realidad, eso va a funcionar para mí. Y si solo escribo verde aquí y luego escribo 0.5 es el Alfa. Va a funcionar el valor RGB para mí, así que si me refresco, verás esa luz adentro. Pero Y si miro el archivo CSS, verás aquí donde tenemos todas nuestras cosas de sombra de caja. En realidad se funcionó 70 137 1 o dos para nosotros. Entonces no necesitábamos a Tiu. No necesitaba tocar eso en absoluto. Se ha arreglado, y eso es exhibir Fund ellos ahora, en realidad, ¿qué tal si queremos tener una sombra de caja de insectos en el mismo artículo exacto? Yo sólo voy a hacer esto. Voy a escribir incent G p A. Y esta vez vamos a lograrlo. Es un poco negro. Déjenme bastante ligero. Un píxel uno recoge cinco píxeles y este es insecto, una pequeña sombra aquí. Esto se ve bastante horrible, en realidad, debido a demasiadas sombras conflictivas. Pero como puedes ver, hemos añadido a reglas de caja. Su sombra de caja gobierna con misma función aquí y en la hoja de estilo. Acaba de añadirlos uno tras otro 20. Ejemplo de opacidad de la Compass: así como otro ejemplo realmente, realmente rápido. Sólo voy a mostrarles la función de capacidad porque creo que es bastante interesante. Enbarme, si escribo, incluya capacidad. No 0.5 bajo este encabezado aquí obviamente hizo esta cabeza. Tengo una capacidad de la mitad, que en realidad no parece ese papel útil porque porque ¿no podemos simplemente escribir capacidad ni 0.5 por sí solos? Pero en realidad, esto es quizás mostrando parte del poder, que tienes cuando usas algunas de estas disfunciones. Esto construido en el de Nixon porque también se agrega esto para legado en los navegadores Explorer, que es algo que es necesario. Tiu tiene menos rapacidad mostrada tantos navegadores como sea posible, pero tal vez algo que a menudo dejaríamos fuera porque es un gran trozo de código, y no siempre nos puede molestar ir ir a encontrarlo. Entonces cosas como esa que podrías de vez en cuando, dejar fuera brújula va a sumar para ti en. Eso es quizá muestra el poder de algunos de estos mixtos ins 21. Ejemplo de contrato de Compass: Ahora, digamos para el Artículo uno, hemos decidido realmente darle un fondo verde, que va a mirar, creo que estarás de acuerdo. Bastante hermosa. Entonces lo estoy si solo agrego aquí después de enfriar. Pero el verde suelo se usa esa variable verde. Ahora eso va a sobrescribir los otros fondos. Entonces vamos a tener uno con un momento de fondo verde. Fondo amarillo. Bueno, ahora, desafortunadamente, no podemos leer nuestro texto ahora, ¿verdad? Porque ese escocés que tiene una tarjeta verde sobre un fondo verde. Entonces vamos en el artículo uno, Hagámoslo para que el color del párrafo. Y ahora sólo voy a poner aquí. Incluir, Y luego voy a usar esta mezcla, en contraste, Contraste, Dead green on Lo que esto va a hacer es que me va a funcionar, si o luces o un color oscuro va a ser mejor en la parte superior de este verde. Entonces está diseñado que en realidad este blanco está en el mejor color en lugar de un negro, que, si llegamos al párrafo normal cuando aquí mismo, sólo prometemos un poco nuevas líneas. OTAN, entonces si aquí mismo incluimos con confianza? No, los fondos No del todo amarillos, ¿verdad? Es amarillo aligerado, 10%. Entonces pongamos eso ahí dentro. Y esto es lo que hace eso, en realidad Ah, color negro va a quedar mejor en este fondo. El blanco va a mejorar en este fondo ahora. No estoy seguro Seguro, si me gusta el blanco completo porque realmente no usamos el blanco en ningún otro lugar del diseño . Entonces, en realidad, volvamos a nuestras variables y añadamos una nueva variable. Uh, un nuevo contraste muy vocal. Se ilumina de fieltro, y esto va a igualar exactamente lo mismo que el amarillo. Ahora esto se utiliza en realidad amarillo como el color predeterminado para las luces texto contrastado. Entonces en realidad eso odia hasta aquí realmente quiere tener el mismo estilo. Entonces, solo usemos eso aquí también. De acuerdo, ahí vamos. Entonces si miramos en la serie de iniciados, obviamente se acaba de crear el color ahí. En base a lo que se ha trabajado, es el mejor contraste con el color de fondo 22. Dónde encontrar más funciones de Compass: Entonces espero de ver estas pocas mezclas es que hayamos sacado de esta librería de brújula. Se puede ver que el encendido y la profundidad off funciones de mix ins que ya han creado. Si quieres ver unos cuantos más de lo que obviamente puedes buscar como y cuando tengas una necesidad específica. O puedes ir al estilo de guion de brújula, los ejemplos de corte orco Teoh coleccionan juntos o ver ah, toda Siris de diferentes ejemplos. 23. Listas: Ahora va a llegar un punto en el que vas a estar realmente, muy acostumbrado a usar el exceso sobre lo que has jugado con la brújula o lo que sea fuera de un marco que disfrutaste usando. Y vas a llegar al punto donde estás listo para quitarte esas ruedas de entrenamiento y empezar a escribir algunas de tus propias funciones. Entonces, veamos algunas de las características más avanzadas. Obsesiona para que podamos conseguir algunas ideas sobre cómo podríamos crear algunas funciones, que nos vas a ayudar específicamente. Por lo que lo primero que debe familiarizarse es algo llamado listas. Si has usado otros frameworks antes de otros lenguajes de programación, podrías estar familiarizado con la idea de un raise a raise son un set off variables. Entonces, ¿dónde está aquí? El verde es igual a este color aquí. amarillo es igual a este color. naranja es igual a este color sobre el rojo es igual a este color. Podríamos crear una lista de colores que tendría todos los colores dentro de ella. Entonces aquí tenemos una lista de colores, y todo está guardado en esta sola matriz aquí. Esta lista de una, que se ve muy similar a una variable en este punto, obviamente, pero si waas para poner esta variable de colores. Esto enumera aquí. No va a decir eso. Voy a tener error. Mira, me dieron un error porque lo que obtuve nunca en mi página principal de estilo porque estamos entrando en algunas de estas variables que dicen cosas como el naranja y el amarillo, que ya no existe. Pero aquí lo que ha pasado es que está probando Teoh, usa toda esta lista de colores donde solo queremos uno. Entonces lo que vamos a hacer en este punto es que vamos a usar una función SAS incorporada llamada longitud y va a obtener un número específico de esta lista. Y queremos el 2do 1 Queremos este f f F cero a cinco. Entonces voy a poner dos ahí dentro, y esto ahora regresará justo ese amarillo. Entonces pasemos por mi otra página. Voy a conseguir estos errores por el momento. Y solo reemplaza esta naranja por un tres color tres y reemplaza todos los amarillos lo largo de esta página. Reemplaza todos los greens por uno y reemplaza ese rojo por un completo. De acuerdo, así que esto está ahorrando Fine. No voy a ir ningún error. Y si solo refresco la página todos esos colores están cargando exactamente lo mismo que esperarías que lo hagan, porque es que está recogiendo ese número desde dentro de la lista. Entonces lo que tenemos aquí es que tenemos colores ahora ya no es variable, sino una lista de variables, y cada una de ellas está seleccionando un elemento específico de la lista, por lo que esto podría no buscar un útil en este momento. Y en realidad, cuando miramos a través del código, no es particularmente elegante porque 10º color a significa un poco menos para nosotros que la palabra amarillo, que es un poco más descriptiva. Y Pero en el próximo par de videos, vas a empezar a ver por qué estas listas podrían ser mucho, mucho más poderosas. Algo que diré en este punto es que esto funciona bien con el espacio aquí, pero vamos a estar usando ese mismo espacio para otras funcionalidades. Última. Entonces, lo que es una mejor idea es si dividimos estas variables con un común como este. Entonces esto sigue siendo una lista aquí, pero está un poco más definida como una lista, y no va a malinterpretar espacios en diferentes lugares, por lo que esto aún ama absolutamente bien como puedes ver. Entonces lo siguiente que realmente quiero mostrarte sobre listas es lo que llamamos un mapa un mapa de lista donde tal vez en lugar de decir colores y luego solo tener una lista, podemos tener una clave específica para cada elemento de la lista. Ahora una clave es una clave es igual. Identificarnos que sabemos de qué elemento de la lista estamos hablando. Se va a reemplazar este número. Entonces en lugar de decir Número dos podrá decir amarillo, ahora se va a ver algo así. Voy a poner justo verde aquí, colon, y luego tener el número. Y luego en la siguiente línea, Desafío Amarillo. Y estas no necesitan ser obviamente palabras que colorean las cosas podrían ser únicas. Esto nos cualquier nombre único que no tenga caracteres especiales en otros que guiones y guiones bajos y sólo tienen números. Después del primer personaje, podrías llamar común Lo que quisieras. Podría ser una idea decir, color primario o color de fondo, o algo que podría ser aún más significativo que solo el color real, especialmente si tuvieras dos tonos diferentes de naranja como tenemos y luego aquí, donde dice en color, realidad ya no vamos a decir 10. Ahora vamos a decir que el mapa se pone y esta es una función incorporada para obtener este mapa el mapa de colores y en lugar de empezar a decir amarillo. Entonces si usamos el mismo pero de código en la mezcla ins aquí, éste es relleno rojo. Y luego toda la garganta aquí, lleva conmigo un segundo principal o que eso realmente fue demasiado, que es amarillo cualquiera que a Vamos a ser amarillo cualquiera Cual va a ser verde. Y acabo de poner este último en hit y guardar. Tan solo refresca la página. Um, parece que he cambiado este color de pelo Teoh para leer nada como ESPN Naranja más que eso . Se puede ver que es exactamente lo mismo que antes. Entonces básicamente lo que tenemos aquí es, lugar de tener un solo elemento en cada variable como teníamos antes, hemos creado una lista de variables, y luego hemos creado una clave para esas listas para que podamos ir y conseguir un ítem específico bastante fácilmente y obviamente podemos ver con estos cuando miramos a través de nuestro código. Exactamente lo que dije que estábamos sacando de donde los colores amarillo es obviamente bastante autoexplicativo . Y ahora, obviamente, cuando miras hacia atrás esto, eso parece un poco más confuso que cuando era para empezar. Que fue eso. Pero lo que les estoy mostrando es alguna funcionalidad básica que van a ser los bloques de construcción las funciones que vamos a ver en el próximo par de videos. 24. Bucles: derecha Siguiente. Vamos a hablar de bucles ahora. Simplemente vuelve a poner todos esos colores como estaban ahora, porque es más fácil verlo solo dice Read on o yellow. Pero les voy a mostrar una buena manera de que pudiéramos usar las listas o listas mapeadas. Generalmente, Teoh hace alguna funcionalidad para que podamos ver aquí que hay cuatro artículos los cuales cada uno tiene una idea diferente. Artículo uno, Artículo dos, Artículo tres, Artículo cuatro Y si miramos aquí, he creado un estilo personalizado sólo para el artículo uno y que establece aquí los colores y el color de contraste . Y los otros tres me acabo de ir por ahora. Por lo que realmente vamos a crear unos cuantos estilos diferentes para cada artículo diferente sobre. Antes de hacer eso, voy a crear una lista mapeada para darnos un poco de información para cada uno de esos artículos. Entonces voy a llamar a mis artículos de lista de mapas porque es un nombre bastante obvio para usar aquí y luego dentro de los artículos. Voy a crear una sub lista diferente para cada uno de los cuatro artículos. No los voy a numerar porque ya están en orden por lo que no tienen ningún tipo de nombre ahí solo lleno en cuatro listas dentro de otra lista llamada artículos. Entonces vamos a tener tres variables diferentes en esta lista. Vamos a tener BG, que va a ser el fondo, y el 1er 1 se va a leer y vamos a tener un padre que va a estar golpeando, y este va a ser de 10 píxeles y vamos a tener tamaño de página, que va a ser el tamaño del encabezado, y éste va a ser 1.6 e Ahora, cada una de estas secciones, voy a crear reglas ligeramente diferentes. Esto va a ser verde. Esto va a ser amarillo encendido. Esto va a ser naranja. Estos van a tener cinco píxeles. Esto va a ser en un punto 4 de la mañana Dos píxeles, 1 de la mañana sólo voy a sacar estos semi colones del final porque ese no es el final. Conoció lista, pero uno del final aquí, Tiny esto hasta un poco. De acuerdo, así que esto tiene un palidecimiento ligeramente diferente para el resto de ellos. Esto va a tener un pendiente diferente también. Y una faltas mucho más grandes yace. Bueno, eso es muy grande Ok, entonces tenemos estas tres reglas diferentes para cada tres estilos diferentes para cada artículo. Y ahora soy bueno para seguir adelante y crea un bucle que va a mirar a través de los artículos y crear estilos ligeramente diferentes para cada uno. Entonces si sustituimos esto aquí, esto es lo que actualmente hace referencia al Artículo uno para darle su fondo y para hacer que el color contraste y para que contrasta con este color. Por lo que son reglas bastante simples en este momento. Pero la forma en que hace referencia es usar el ampersand y luego sin que ningún espacio vaya directo al escribir Artículo uno. Y ese ampersand, como sabemos, sólo va a repetir el hecho de que dice sección de artículo y me está permitiendo hacer referencia a un artículo específico. Entonces lo que voy a hacer es que voy a usar esta cada función, y voy a decir que cada artículo ahora artículo es el Si miramos atrás a las variables, esto se llamaba artículos, entonces artículo es una nueva variable. Estoy creando una nueva lista, quiero decir, y voy a decir cada artículo en artículos y luego eso va Teoh bucle a través de cada artículo. Ahora esto, dice uno aquí pero no vamos a dejar que sea un número ligeramente diferente cada bucle a través. Entonces me voy. Teoh crear una nueva variable aquí llamada I y esto va a Igual Index es una función construida en para evaluar. Y qué índice hace es que te vas a ver las listas de artículos y encontrar el artículo específico que estamos viendo actualmente y obtiene el índice. Entonces si es el 1er 1 se va. Si es consciente de que este es el 1er 1 va a girar el valor de uno. Si es un segundo a cambio, el valor de dos. Por lo que esta variable I ahora equivale a 123 o cuatro, dependiendo de qué bucle a través estamos en. Entonces podríamos poner esto yo al final aquí así, Pero eso no es ir del pie trabajo porque va a asumir que esto es parte de este me nombre d . Entonces necesitamos usar un poco extra fuera de exceso de sintaxis, que se ve algo así vamos a tener como si fuera un CSS i d Vamos a tener un pelo hash y luego abriendo rizado romper un corsé y uno de cierre y luego esto es va a cambiar a 1234 No se corre a través. Ahora deberíamos poder ejecutar este código y está bien corriendo. Por lo que todos tienen un fondo verde en este momento porque si miramos nuestra hoja de estilo, ahora está buceando a través de esas 1234 y creando el mismo estilo exacto cada vez con un I D. separado Al final. De acuerdo, así que no queremos del todo. No queremos del todo que siempre tenga un fondo de do verde. Íbamos a usar Met, consigue función y ahí dentro vamos a ver nuestro artículo y vamos a usar esta clave aquí fondo. Y entonces solo usemos esa misma referencia aquí también, solo que no todo el asunto, sino justo aquí. Por lo que se va a conseguir el contraste en color también. Veamos cómo se ve esto. De acuerdo, así que eso está bien. Entonces eso ha llegado a través de su rojo. Eso es amarillo. Eso es naranja. Y esto también ha encontrado si va a contrastar mejor con el color claro o el color oscuro . Entonces, ¿qué? Es un fondo amarillo. Se elige negro, y cuando es un fondo verde ha elegido esta tarjeta amarilla porque ese es el color que contrasta mejor. De acuerdo, entonces veamos aquí atrás y veamos qué más tenemos. Tenemos tamaño de odio, y tenemos relleno. Entonces hasta ahora, hemos estado usando familia de pies de fondo. De acuerdo, así que hasta ahora, hemos estado usando esta h para etiquetar aquí, y hemos estado llamando al frente, si se acuerda con razón, dirigir frente es una mezcla dentro. Creamos y debilitamos enviar en un tamaño de fuente. Entonces si ponemos eso ahora dentro de cada artículo específico, ahora podemos enviar esto del tamaño para el encabezado. Si usamos la tecla de tamaño odio así que vamos a ver se pone Y aquí, sólo vamos a decir tamaño hit. Obviamente, esto es envolverse bastante porque obviamente acabo de cambiar el tamaño de esto para que puedas verlo más fácil. Pero déjame que me mueva aquí un poco más. De acuerdo, Entonces ahora los dos de odio idealmente deberían tener un frente de cabeza, lo que va a cambiar el estilo de fuente para financiar uno va a cambiar el tamaño que ponemos , y va a hacerlo audaz, que ya está Bien, así que ahí están nuestros diversos tamaños de fondos diferentes. Esto se ve bastante interesante. Y luego en esta zona principal aquí, tenemos relleno aquí. Pero vamos a sacar eso, vamos a tener un golpeteo separado para cada uno fuera de los diferentes artículos. Y para eso, vamos a usar de nuevo mis gets. Y en el mapa se pone vamos. Teoh, usa esa tecla de teclado, que obtuvimos de nuestra variable aquí. Está bien. Y como puedes ver, ahora se le da a cada una de estas cajas una palmadita ligeramente diferente, así que eso es un bucle cada. Pero por el bien de la experimentación, vamos a mostrar cómo podríamos hacer exactamente este mismo problema con un tipo de bucle diferente. A esto se le llama bucle cuatro ahora en un bucle cuatro iban a decir, vamos a crear una nueva variable llamada Dollar Sinai, que funcionará exactamente igual que antes para un signo de dólar de uno a cuatro. Porque tenemos cuatro en nuestra lista, pero no sabemos si habría tal vez cinco o tres y futuro. Entonces queremos usar una función incorporada llamada longitud, que solo vamos a envolver alrededor de los artículos, y esta función va a ver cuántos artículos hay en esa lista al devolvernos. Por lo que va a decir va a bucle de 1 a 4 veces y esto va a incrementarse cada vez dándonos la misma idea exacta Así que ya no necesitamos eso. Esto sólo va a mirar a través y darnos artículos como la lista todo el tiempo. Pero usemos el I D para referirnos a qué idea en esa lista queremos usar. Entonces, en realidad, lo que necesitamos hacer es crear tres listas separadas aquí abajo. Entonces voy a tener uno llamado colores otra vez, y va a decir leer verde, amarillo, amarillo, naranja Voy a tener un jadeo frío, que sólo dirá 10 píxeles, cinco píxeles, dos píxeles, 12 píxeles y otro llamado tamaño de encabezado. Pero ella va a decir 1.6 cm 1.4 AM uno. Sí, a las 2 de la mañana y sólo vamos a eliminar esta lista mapeada, y en su lugar vamos a tratar con tres listas más simples. Por lo que tenemos colores relleno y tamaño de encabezado. Ahora. Esto significa que ahora vamos a reemplazar esto por colores. Creo que escribo la manera inglesa y luego aquí vamos a decir colores de fondo y vamos a volver a ese funcional usando antes del 10 1 Y esta vez el i d estamos referenciando va a cambiar cada vez. Entonces vamos a usar el signo de dólar I, que va a incrementarse dependiendo de la mirada puesta. Entonces, solo usemos eso otra vez. Sí, que esto va a decir palmaditas en lugar de colores y luego aquí abajo, va a decir tamaño de encabezado así, creo. Déjame sólo comprobar los colores de relleno tamaño de encabezado. Eso debería estar bien ahora diciendo entender, he escrito la Liga Americana. Déjame sacar esos usos, ¿de acuerdo? Y esto es bastante interesante. Parezco tener algunos golpes bastante impresionantes en ese 1er 1 Ah, pongo 10 pc que no tienes idea ¿Qué hay de esto? Si cambio de nuevo a 10 píxeles ahora me está dando 10 píxeles y tenemos todos los mismos tamaños y pordines que teníamos antes, que está usando un sistema ligeramente diferente off que se avecina. Y finalmente tenemos un bucle mundial sobre lo que hace un bucle while es que hará casi exactamente lo mismo que un bucle completo. Excepto podemos elegir cuánto incrementamos yo por cada vez. Por lo que potencialmente podríamos tener cada otra caja teniendo un estilo aplicado a ella, por ejemplo, o podríamos darle alguna fórmula matemática diferente para crear qué número es. Pero en esta ocasión, solo voy a hacer el ojo igual yo más uno en cada bucle a través. Y mientras yo es menor que la longitud de los colores, entonces vamos a continuar el bucle. Esto también significa que antes de iniciar el bucle, vamos a tener que darle valor a I. Vamos a darle un valor de cero. Entonces lo que pasa aquí es que vamos a bajar aquí. Se va a decir que igual a cero mientras estoy menos de cuatro, que es la longitud off colores pasan por el bucle. Se va a golpear aquí. Esto va a hacer que me convierta en uno, lo que nos va a dejar salir. Ponga todo este código. Por lo que Articles uno tiene el primer color, el primer lote de relleno y el primer tamaño de partida. Y luego porque uno sigue siendo menos de cuatro, va a dar la vuelta de nuevo, y esta vez se va a convertir, también. Y sólo va a mirar a través de incremental cada vez que golpee esto y esencialmente hacer exactamente lo mismo que eso para Luke, solo eso. El poder que tenemos aquí es, como dije, podríamos potencialmente decirle a cada vez, y luego va a saltarse ciertas cajas y dar estilo a otras, y podemos hacer cualquier tipo de funciones matemáticas que queramos con esto. Entonces tal vez un rato, Loop tiene un poco más de poder apagado cuatro bucles, posiblemente un poco más simple a la derecha. Por lo que hay tres tipos diferentes de bucles, y todos pueden lograr las mismas cosas. Pero en diferentes situaciones, diferentes bucles van a adaptarse más a tus necesidades que arriba. 25. Si otro es: Ahora seguimos usando este archivo de brújula aquí para usar un par de funciones, y creo que quizá podríamos recrear esas funciones nosotros mismos. Ahora creo que estamos en el punto en el que podemos empezar a quitarnos un poco esas ruedas de aprendizaje y simplemente crear las nuestras propias. Entonces esto es un interesante que tenemos aquí. Contrébalo. Vamos a intentarlo. Si podemos recrear esto, así que el contraste hizo es crear texto amarillo o negro, dependiendo de qué tipo de fondo sea. Entonces vamos a ver si solo pudiéramos crear nuestra propia mezcla que haga lo mismo. Entonces si simplemente no pude y mezclando, voy a llamarlo contraste. Voy a mandar una discusión con un color de fondo y luego dentro de aquí vamos a hacer una pequeña prueba. Entonces se llama un If else, y se va a ver algo como esto va a decir si y va a revisar este color de fondo variable y queremos comprobar qué tan ligero es, Así que vamos a usar una función incorporada llamada ligereza, y esto va a devolver un porcentaje, así que queremos comprobar si es menos del 50% y esto es un condicional aquí donde dice que esto va a dar un número y nos estamos tomando estos dos números el uno contra el otro para que pudiéramos poner varias cosas diferentes y podríamos decir iguales y eso nos diría si el color es exactamente 50%. Si fuera gris muy, muy específico, entonces esto diría que sí o no y podríamos decir Queremos comprobar si este color es menor 50% o más al 50%. Pero podríamos decir: ¿Es menor o igual a? También puedes comprobar si no es igual al usar una marca de explicación y luego es igual. Y esto será cierto si es otra cosa que eso muy específico. Gray va a ejecutar el comando que va a estar entre estos dos tirantes rizados. Pero en esta instancia, solo quiero comprobar si es menos del 50% de ligereza. Entonces esto va a devolver un valor de 49 o menos por ciento, lo que significa que es un fondo oscuro, lo que significa que quiero un color claro. Entonces pongamos amarillo Vale, así que eso nos va a dar un texto amarillo. Si hay un fondo de color oscuro pero vamos a tener un fullback para si hay un fondo claro de dos colores. Entonces vamos a escribir más aquí que está a la señal de lo contrario. Y luego tenemos dos corchetes más y dentro de esos corchetes va a ser el color para fondos de color claro. Y voy a poner esta especie de color gris carbón, y esto es todo el Mixon que necesitamos. Todo lo que tenemos que hacer es revisar este color para ver si es más oscuro o más claro que el 50% y luego enviar de vuelta un color para el texto en consecuencia. Entonces esta fue la función original de brújula. Un ID de contraste de mezcla en el mío se llama contraste. Entonces vamos a cambiar a la mía ahora y vamos a ver cómo se ve la página. Está bien, genial. Entonces eso es casi exactamente lo mismo que waas. Excepto ahora estoy un poco más en control de la mezcla, así que vamos a ver si podemos crear un humo o unas cuantas pruebas más aquí para ver si podemos encontrar alguna otra cosa. Entonces, en realidad sumemos esto aquí abajo como otra si y vamos Teoh, revisa algo más primero. Entonces lo que esto está haciendo es que esto va a decir si voy a escribir otro condicional aquí para probar, y si es si es un sí, va a hacer esto. Si es un no, va a ir al siguiente y ver si es éste o no. Y si es un sí, lo hará amarillo. Si es un no, se va a bajar a esto. Y este es el default fullback. Si algo se reduce a lo más, siempre va a ser cierto, y va a hacer que el texto sea negro. Entonces éste, vamos a decir, si el color de fondo No, ese signo no. Queremos un signo de dólar. color de fondo es igual a dos veces porque no lo somos. No estamos tratando de forzarlo a igualar eso. Estamos tratando de comprobar si es igual a eso. Por lo que normalmente llevamos iguales dos veces en programación para comprobar estas cosas. Si el color de fondo es igual, veamos si es igual a verde, por lo que sabemos que el 2do 1 es igual a verde. Entonces en la ocasión que igual al verde, le vamos a dar un um, yo Vamos a darle un color blanco, así que si refresco esta página ahora, tiene blanco para el grano. De lo contrario se va a comprobar lo oscuro que es el fondo. Si es más oscuro que una cierta cantidad, la va a hacer amarilla, y es menos que cierta cantidad. Lo va a hacer Este dicho 333 color negro. Está bien, eso es genial. Veamos si tal vez podemos hacerlo para que esta naranja también sea blanca. Entonces queremos tener a dos argumentos que estaban probando en contra aquí. Queremos condicionar la ALS. Entonces solo voy a seguir adelante y escribir o en el medio aquí, o el color de fondo es igual a igual. Oh, no. De acuerdo, entonces ahora esto en realidad es un poco confuso, ¿no? Porque dice que el color de fondo es igual a verde o fondo. El color es igual a naranja, pero tenemos que hacerle saber qué orden probar estas cosas. Y si pongo algunos paréntesis alrededor de esto que todo dentro de estos paréntesis iba a igualar verdadero o falso antes de que lea el todo. Y si pongo esto en enfermedad de impresión, eso puede distraer esto para que no nos solapemos. Pongo esta huella. Esto es entonces vamos a tener que valores que cada uno igual, verdadero o falso. Si alguno de ellos es igual a cierto, entonces va a ir directo a esta siguiente línea. Si ambos igualan falso, entonces irá a este siguiente. De acuerdo, así que vamos a guardar eso y a ver si ahora tenemos texto blanco en caja naranja. Alternativamente, podríamos escribir y aquí dentro y esto sólo sería cierto si ambos fueran ciertos. Entonces sólo si el color de fondo era verde y naranja, lo cual nunca va a suceder. Y verás que luego volverá a volverse a lo que van las luces a amarillas ¿Y qué? Empieza a ir al negro. En caso de tener un par de argumentos contra los que probar, puedes comprobar si ambos son ciertos, y luego irá a éste. Entonces esa es una declaración if else. Pero para una pieza de código tan simple con solo un par de líneas, y bien podríamos usar una función SAS llamada la función if. Entonces solo voy a expandir un poco esto y mostrarte cómo funciona esto. Entonces en si la función va, Teoh tiene un valor verdadero o falso, y luego algún código que vamos a ejecutar para verdadero o código que se ejecutaría para falso. Entonces voy a escribir color aquí, y va a haber dos opciones posibles. Podría ser amarillo o podría ser este color gris. Ahora todo lo que necesitamos ahora es esta primera sección aquí va a ser verdadera o falsa. Entonces lo que idealmente deberíamos hacer es poner en todo esto porque no queremos la parte de contraste. Simplemente queremos ese mapa poco aquí y solo conseguir el condicional off ligereza menor o mayor al 50%. Yo sólo quiero poner eso aquí, va a tener el color ahí. Ahora bien, esta parece una línea bastante complicada en este momento. Pero si solo lo guardo y refresco esta página, verás que eso codifica negro en eso. Coz amarillo qué está haciendo esto. ¿ Está diciendo si esto es cierto, hazlo amarillo. Si esto es falso, hazlo negro. Y esto es lo que estamos probando que dice ligereza grande que o menos del 50%. Y tiene este color en el medio, que es el mapa obtiene fondo del artículo. Ahora eso parece un poco complicado ahí dentro. Entonces lo que podríamos hacer es al inicio de cada bucle, podríamos crear una nueva variable Vamos a enfriarlo color de fondo en Vamos a hacer que sea igual. Matt Gaetz artículo color de fondo. Ahora eso va a reducir un poco porque entonces no lo hacemos No estamos repitiendo ese texto. Simplemente podemos usar eso cada vez, que es un poco naturaleza. Pero esto sigue siendo bastante complicado, por lo que en realidad podríamos ver y tener otra variable llamada Is Light. Llamémoslo es luz, y esto va a ser simplemente un valor booleano, ya que en él igualará verdadero o falso. Y voy a poner esto aquí, y realmente debería llamarse su oscuridad. ¿ No pondría esto aquí? Y esto o bien tendrá un valor de sí, verdadero o falso, dependiendo de si esto tiene una ligereza de más o menos del 50%. Entonces ahora se puede ver que esto es mucho, mucho más claro, un poco de código. Y si refresco esta página aquí , sigue funcionando exactamente como pensábamos. Entonces lo que estamos haciendo aquí es cuál es la creación de algunas variables al inicio de cada bucle a través, por lo que también podríamos simplemente agregar este relleno. Aquí. Tengo un relleno frío variable encendido. Podríamos hacer lo mismo con el tamaño de encabezado, así que solo está mostrando un código mucho más claro 26. Felicitaciones: Bueno, felicitaciones. Ya has llegado hasta el final de nuestro curso Y en tan solo dos horas ha cambiado la forma en que escribes Hojas de estilo para siempre. Puedes seguir adelante y empezar a ahorrar tiempo Escribiendo mejor estilo. Ella está enseguida. Espero que hayas encontrado el curso Divertido cuando espero que lo hayas encontrado informativo. Si no tienes por alguna razón por favor escríbeme un mensaje y avísame cómo puedo mejorarlo en el futuro Si tienes un favor compártelo con tus amigos en derecho a revisar Y espero volver a verte Pero claro, muy, muy pronto