1 00:00:00,000 --> 00:00:04,466 [MÚSICA] 2 00:00:04,466 --> 00:00:08,813 Esta lección en particular trata de los preprocesadores CSS, 3 00:00:08,813 --> 00:00:11,880 en particular Less y Sass. 4 00:00:11,880 --> 00:00:17,420 Ahora, obviamente, estos temas tienen más que ver con CSS y la 5 00:00:17,420 --> 00:00:22,680 definición de clases CSS, pero sería inapropiado 6 00:00:22,680 --> 00:00:26,940 para mí completar un curso de Bootstrap sin 7 00:00:26,940 --> 00:00:31,010 profundizar un poco en los preprocesadores CSS. 8 00:00:31,010 --> 00:00:37,265 Simplemente porque Bootstrap está construido usando Sass para su fuente. 9 00:00:37,265 --> 00:00:41,970 Por lo tanto, examinaremos brevemente los preprocesadores CSS, 10 00:00:41,970 --> 00:00:47,682 qué son, cómo son útiles en la definición de clases CSS 11 00:00:47,682 --> 00:00:51,166 y por qué Bootstrap los utiliza. 12 00:00:52,972 --> 00:00:58,263 Como probablemente entienda por su experiencia anterior con CSS, 13 00:00:58,263 --> 00:01:00,997 CSS es ideal para definir estilos y 14 00:01:00,997 --> 00:01:06,325 aplicar repetidamente estos estilos a varios elementos HTML. 15 00:01:06,325 --> 00:01:11,940 Y así es como usamos CSS cuando definimos nuestras páginas web. 16 00:01:11,940 --> 00:01:15,080 Pero cuando miras el código CSS en sí, 17 00:01:15,080 --> 00:01:19,620 comienzas a darte cuenta rápidamente de las limitaciones de CSS. 18 00:01:19,620 --> 00:01:23,660 Especialmente si viene de un fondo de programación, se da cuenta de que 19 00:01:23,660 --> 00:01:29,342 CSS no tiene lo que normalmente espera en un lenguaje de programación, como variables, 20 00:01:29,342 --> 00:01:34,610 anidamiento de selectores, variables, expresiones y funciones. 21 00:01:36,310 --> 00:01:40,580 Esto significa que escribir código CSS se vuelve engorroso, y 22 00:01:40,580 --> 00:01:44,370 mantener el código CSS se vuelve engorroso debido a la 23 00:01:44,370 --> 00:01:49,550 falta de la sintaxis tradicional similar al lenguaje de programación. 24 00:01:49,550 --> 00:01:54,770 Ahora, aquí es donde los preprocesadores CSS vienen a nuestro rescate. 25 00:01:55,800 --> 00:02:01,090 Hay varios preprocesadores CSS populares que intentan abordar algunas de 26 00:02:01,090 --> 00:02:07,290 las deficiencias de CSS apoyando muchas de estas características. 27 00:02:07,290 --> 00:02:13,000 Dos en particular que es de interés para nosotros es Less y Sass. 28 00:02:14,840 --> 00:02:19,940 Vamos a ver estos dos con más detalle en esta lección. 29 00:02:19,940 --> 00:02:24,744 Ahora, cuando define sus clases CSS usando uno 30 00:02:24,744 --> 00:02:29,760 de estos lenguajes de preprocesador como Less o 31 00:02:29,760 --> 00:02:34,990 Sass, eventualmente tienen que convertirse en CSS, 32 00:02:34,990 --> 00:02:39,696 pero esto se puede hacer automáticamente antes de que el CSS se use en su página web. 33 00:02:39,696 --> 00:02:44,840 Lo que estos lenguajes de preprocesamiento nos traen es una 34 00:02:44,840 --> 00:02:51,580 sintaxis más similar al lenguaje de programación, como veremos en las próximas diapositivas. 35 00:02:51,580 --> 00:02:53,620 Examinaremos a Less y Sass brevemente. 36 00:02:54,990 --> 00:03:00,890 En particular, la razón para echar un vistazo a esto es porque Bootstrap 37 00:03:00,890 --> 00:03:08,540 usa Sass para definir su fuente para sus clases CSS. 38 00:03:08,540 --> 00:03:12,980 Y entonces, si entras en la personalización de Bootstrap, 39 00:03:12,980 --> 00:03:16,230 entonces tendrías que trabajar con el código Sass. 40 00:03:16,230 --> 00:03:21,402 Bootstrap 3, que era la versión anterior de Bootstrap, usó Less 41 00:03:21,402 --> 00:03:26,260 , y por lo tanto, pensé que sería algo apropiado cubrir Less y 42 00:03:26,260 --> 00:03:32,330 Sass, porque son bastante similares entre sí 43 00:03:32,330 --> 00:03:39,960 en términos de sus capacidades y la forma en que se define la sintaxis. 44 00:03:39,960 --> 00:03:45,630 Las características típicas que aportan los preprocesadores CSS es el soporte para 45 00:03:45,630 --> 00:03:53,340 variables, selectores de anidamiento, expresiones, funciones y mixins. 46 00:03:53,340 --> 00:03:59,580 Así que veremos algunas de ellas con algunos ejemplos en las siguientes diapositivas. 47 00:03:59,580 --> 00:04:02,270 Lo primero que veremos son las variables. 48 00:04:02,270 --> 00:04:05,310 Ahora, en muchas clases CSS que define, 49 00:04:05,310 --> 00:04:11,540 es posible que tenga un uso repetido de ciertas cantidades. 50 00:04:11,540 --> 00:04:16,600 Podría valer más la pena si define algunas variables que 51 00:04:16,600 --> 00:04:21,590 contienen estas cantidades y usa estas variables en la definición de sus clases CSS. 52 00:04:21,590 --> 00:04:24,240 Así que ahí es donde las variables vienen a tu rescate. 53 00:04:24,240 --> 00:04:29,720 Aquí, veremos tanto el código Less como el código SCSS. 54 00:04:29,720 --> 00:04:34,090 Scss es una versión de Sass, 55 00:04:34,090 --> 00:04:40,670 versión más popular de la sintaxis de Sass, así que es por eso que me concentro en Scss aquí. 56 00:04:40,670 --> 00:04:43,420 Por lo tanto, si define variables en Less, 57 00:04:43,420 --> 00:04:47,610 procederá con el nombre de la variable con un signo @. 58 00:04:47,610 --> 00:04:55,720 En el caso de Scss, usará un signo de dólar antes del nombre de la variable. 59 00:04:55,720 --> 00:04:57,340 Y una vez que defina esas variables, 60 00:04:57,340 --> 00:05:01,750 puede usar esas variables cuando defina las clases. 61 00:05:01,750 --> 00:05:06,700 Como puede ver en el ejemplo, donde definimos la barra de navegación inversa como fondo, 62 00:05:06,700 --> 00:05:11,410 o la altura del elemento carrusel como variables. 63 00:05:11,410 --> 00:05:16,350 Ahora, la ventaja de definir variables al inicio de su clase CSS 64 00:05:16,350 --> 00:05:21,400 es que hay un único punto donde puede actualizar un valor, y 65 00:05:21,400 --> 00:05:27,390 actualizará automáticamente todas las clases CSS que usan esta variable. 66 00:05:27,390 --> 00:05:31,080 Normalmente, la forma en que utilizamos variables en lenguajes de programación. 67 00:05:32,110 --> 00:05:38,340 Las variables en los lenguajes de preprocesador CSS también pueden tener su propio alcance. 68 00:05:39,650 --> 00:05:44,510 Muy a menudo cuando define clases CSS, especialmente cuando 69 00:05:44,510 --> 00:05:49,760 tiene que definir clases que están anidadas dentro de otras clases, 70 00:05:49,760 --> 00:05:53,330 entonces, muy pronto su código CSS se vuelve muy engorroso. 71 00:05:53,330 --> 00:05:58,370 Entonces, aquí es donde el anidamiento es compatible con sus preprocesadores CSS. 72 00:05:58,370 --> 00:06:02,380 Como puede ver, puede definir, por ejemplo, una clase de carrusel, y 73 00:06:02,380 --> 00:06:05,876 dentro de una clase de carrusel, puede definir una clase de elemento de carrusel. 74 00:06:05,876 --> 00:06:11,900 Y de manera similar, la subclase de imagen dentro de la clase de elemento del carrusel. 75 00:06:11,900 --> 00:06:18,161 Así que aquí puede ver que cada uno de estos está anidado dentro de una clase anterior. 76 00:06:19,440 --> 00:06:25,410 Con las variables, puede contener un valor a la vez en una variable. 77 00:06:25,410 --> 00:06:30,730 Supongamos que tiene un grupo de variables que resumidas 78 00:06:30,730 --> 00:06:37,275 declaran un conjunto de declaraciones CSS, ahí es donde hacemos uso de mixins. 79 00:06:37,275 --> 00:06:42,910 En Less, define un mixin dándole un nombre, 80 00:06:42,910 --> 00:06:47,650 y en Sass simplemente precede eso con un @mixin 81 00:06:47,650 --> 00:06:52,530 delante del nombre de la declaración mixin. 82 00:06:52,530 --> 00:06:58,560 Y dentro de un mixin, puede definir un montón de declaraciones CSS 83 00:06:58,560 --> 00:07:03,620 que luego se pueden reutilizar para varias clases CSS. 84 00:07:03,620 --> 00:07:08,110 Como puede ver en este ejemplo aquí, definimos el margen cero 85 00:07:08,110 --> 00:07:12,480 como un mixin, tanto en Less como en Sass. 86 00:07:12,480 --> 00:07:18,120 Tenga en cuenta la variación menor en la sintaxis en cada uno de esos casos. 87 00:07:18,120 --> 00:07:25,250 Y luego, puede usar este mixin en la definición de clases CSS adicionales. 88 00:07:25,250 --> 00:07:30,620 Así que aquí puede ver que para el encabezado de fila, definimos el margen cero como 89 00:07:30,620 --> 00:07:35,480 un mixin en el encabezado de fila, lo que significa que todas 90 00:07:35,480 --> 00:07:40,780 estas propiedades del margen cero serán heredadas por esa clase de encabezado de fila. 91 00:07:40,780 --> 00:07:47,320 Los mixins pueden asumir parámetros adicionales si así lo desea definirlos. 92 00:07:47,320 --> 00:07:49,970 Entonces, en este caso, estoy definiendo 93 00:07:49,970 --> 00:07:54,680 una variación de la mezcla de margen cero que vimos en la diapositiva anterior. 94 00:07:54,680 --> 00:07:59,935 Aquí, este mixin de margen cero toma dos parámetros, 95 00:07:59,935 --> 00:08:03,011 pad arriba abajo y pad izquierda derecha. 96 00:08:03,011 --> 00:08:08,840 Y con Less, incluso puede especificar el valor predeterminado para él, 97 00:08:08,840 --> 00:08:15,276 pero con Scss necesita especificar explícitamente los valores. 98 00:08:15,276 --> 00:08:20,871 Así que aquí estamos definiendo dos propiedades CSS diferentes, el margen y el 99 00:08:20,871 --> 00:08:27,880 relleno, y luego el relleno en sí utiliza los parámetros para nuestro mixin allí. 100 00:08:27,880 --> 00:08:32,300 Entonces, en ese caso, puede usar estos mixins como ve en 101 00:08:32,300 --> 00:08:36,997 las dos clases CSS definidas debajo del encabezado de fila y 102 00:08:36,997 --> 00:08:41,810 el contenido de la fila especificando sus valores de parámetro 103 00:08:41,810 --> 00:08:46,270 cuando incluya ese mixin en su clúster CSS. 104 00:08:47,470 --> 00:08:52,570 No solo eso, incluso puede realizar operaciones matemáticas en 105 00:08:52,570 --> 00:08:58,120 variables predefinidas cuando las usa dentro de sus clases CSS. 106 00:08:58,120 --> 00:09:03,470 Así que aquí se puede ver que he definido dos elementos diferentes del carrusel 107 00:09:03,470 --> 00:09:05,740 con dos tamaños diferentes, y así 108 00:09:05,740 --> 00:09:10,060 se puede ver que las alturas de cada uno de ellos se definen de manera diferente. 109 00:09:10,060 --> 00:09:15,105 En un caso, estoy usando la altura predefinida, en otro caso 110 00:09:15,105 --> 00:09:20,244 estoy multiplicando esa altura y luego la uso para definir la 111 00:09:20,244 --> 00:09:25,230 propiedad height dentro de mi elemento de carrusel para la clase item-large. 112 00:09:25,230 --> 00:09:28,778 Por lo tanto, este tipo de operaciones matemáticas en 113 00:09:28,778 --> 00:09:33,710 variables también está permitido en lenguajes de preprocesador CSS. 114 00:09:35,060 --> 00:09:40,160 Otras características que incluyen los preprocesadores CSS 115 00:09:40,160 --> 00:09:47,365 son funciones que permiten definir funciones matemáticas, Menos cadenas. 116 00:09:47,365 --> 00:09:53,015 También puede hacer operaciones de color y operaciones de mezcla de colores utilizando estas funciones 117 00:09:53,015 --> 00:09:57,915 y hacer uso de ellas cuando defina sus clases CSS. 118 00:09:57,915 --> 00:10:01,345 Esto es un poco avanzado, así que no voy a entrar en demasiados detalles allí. 119 00:10:03,470 --> 00:10:11,552 Además, puede introducir clases preprocesadores CSS predefinidas en otras clases. 120 00:10:11,552 --> 00:10:16,680 Entonces, por ejemplo, si tiene una clase Less como está definida, y 121 00:10:16,680 --> 00:10:20,100 puede ingresar ese archivo en otro archivo Less. 122 00:10:20,100 --> 00:10:23,347 Del mismo modo, si ha definido archivos Scss 123 00:10:23,347 --> 00:10:29,210 , puede importarlos a otros archivos Scss mediante la operación de importación. 124 00:10:29,210 --> 00:10:32,670 La sintaxis es la misma para Less y Sass. 125 00:10:33,890 --> 00:10:40,180 Ahora que hemos visto algunas características de los lenguajes de preprocesador CSS, vamos a 126 00:10:40,180 --> 00:10:45,520 examinar cómo podemos realmente hacer uso de ellos haciendo un par de ejercicios. 127 00:10:45,520 --> 00:10:49,900 Primero, haremos un ejercicio basado en Menos. 128 00:10:49,900 --> 00:10:53,677 Luego seguiremos eso con un ejercicio basado en Sass. 129 00:10:53,677 --> 00:10:57,099 [ MÚSICA]