1 00:00:03,250 --> 00:00:06,680 Ahora pasaremos al siguiente ejercicio, 2 00:00:06,680 --> 00:00:11,535 donde usaremos la sintaxis de SCSS para definir 3 00:00:11,535 --> 00:00:18,325 nuestras clases SCSS y convertirlas automáticamente en sus clases CSS correspondientes. 4 00:00:18,325 --> 00:00:22,220 Vamos a hacer exactamente el mismo conjunto de pasos 5 00:00:22,220 --> 00:00:26,890 que hicimos para el último ejercicio que acabamos de completar, 6 00:00:26,890 --> 00:00:31,470 pero usando la sintaxis de SCSS. 7 00:00:31,470 --> 00:00:38,885 Para empezar, en su proyecto en la carpeta CSS, 8 00:00:38,885 --> 00:00:47,180 vamos a crear un nuevo archivo y nombrarlo como inicio de estilo SCSS. 9 00:00:47,180 --> 00:00:51,660 Ahora en este archivo vamos a definir nuestras clases SCSS y luego 10 00:00:51,660 --> 00:00:56,795 convertirlo automáticamente en nuestras clases CSS. 11 00:00:56,795 --> 00:01:01,350 Así que ahí, comencemos por definir primero las variables, 12 00:01:01,350 --> 00:01:05,110 así que empezaré con gris claro, 13 00:01:06,810 --> 00:01:11,820 ahora he agregado algunas variables más aquí de nuevo con 14 00:01:11,820 --> 00:01:16,940 los mismos nombres que usamos en el último ejercicio anterior, 15 00:01:16,940 --> 00:01:20,760 pero con la sintaxis de SCSS para que 16 00:01:20,760 --> 00:01:25,630 todas las variables estén precedidas con el signo de dólar para definirlos como variables. 17 00:01:25,630 --> 00:01:27,750 A continuación definirá el mixin. 18 00:01:27,750 --> 00:01:43,888 Entonces, para el mixin, diría mixin margen cero, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-izquierda-derecha, 20 00:01:48,920 --> 00:01:54,920 y definimos los valores como antes. 21 00:02:17,930 --> 00:02:21,130 Ahora que hemos completado la definición del mixin, 22 00:02:21,130 --> 00:02:26,690 podemos hacer uso de él en nuestras clases SCSS que definimos más adelante. 23 00:02:27,480 --> 00:02:31,280 Ahora definamos algunas clases SCSS, 24 00:02:31,280 --> 00:02:40,025 así que definiré el encabezado de fila que usaré 25 00:02:40,025 --> 00:02:44,740 la mezcla de margen cero 26 00:02:44,740 --> 00:02:52,900 con los valores cero píxel aquí. 27 00:02:53,620 --> 00:02:59,055 Continuaremos definiendo algunas clases más que agregarán aquí, 28 00:02:59,055 --> 00:03:01,910 por lo que puede ver que he definido junto con 29 00:03:01,910 --> 00:03:05,290 el encabezado de la fila y el contenido de la fila donde utilicé 30 00:03:05,290 --> 00:03:12,730 las mixins y el pie de página y la dirección de Jumbotron 31 00:03:12,730 --> 00:03:15,230 y así sucesivamente, y puede ver el uso de 32 00:03:15,230 --> 00:03:21,190 las variables que tenemos definido anteriormente en este ejemplo allí. 33 00:03:21,190 --> 00:03:27,875 Obviamente, el código está disponible en las instrucciones de ejercicio que siguen a este video. 34 00:03:27,875 --> 00:03:32,295 A continuación, agregaremos si anidan clases. 35 00:03:32,295 --> 00:03:35,395 Al igual que hicimos en el último ejercicio, 36 00:03:35,395 --> 00:03:40,780 agregaremos en la clase de carrusel con el fondo establecido en fondo oscuro y luego 37 00:03:40,780 --> 00:03:42,345 dentro donde anidaremos 38 00:03:42,345 --> 00:03:47,065 una clase de elemento de carrusel con la altura establecida en altura del elemento del carrusel, 39 00:03:47,065 --> 00:03:51,945 y luego otra clase interna colores imagen con algunas propiedades allí, 40 00:03:51,945 --> 00:03:56,945 y luego la clase de botón de carrusel como definimos anteriormente. 41 00:03:56,945 --> 00:04:02,070 Así que con esto, hemos hecho los cambios en nuestras clases SCSS, 42 00:04:02,070 --> 00:04:03,925 así que vamos a guardar los cambios. 43 00:04:03,925 --> 00:04:09,200 Ahora, necesitamos convertir esto en su archivo CSS correspondiente. 44 00:04:09,200 --> 00:04:13,835 Para convertir nuestro código fuente SCSS en el código CSS correspondiente, 45 00:04:13,835 --> 00:04:19,395 vamos a tomar la ayuda de otro módulo de nodo llamado node-sass. 46 00:04:19,395 --> 00:04:24,485 Permite instalar el módulo de nodo escribiendo npm 47 00:04:24,485 --> 00:04:33,845 install save dev—save dev y luego node-sass. 48 00:04:33,845 --> 00:04:37,690 Así que de esta manera, guardaremos este paquete node-sass 49 00:04:37,690 --> 00:04:42,020 como una dependencia de desarrollo en nuestro archivo package.json. 50 00:04:42,020 --> 00:04:44,160 Una vez completada la instalación, 51 00:04:44,160 --> 00:04:49,090 vamos a añadir un script en nuestro archivo package.json. 52 00:04:49,090 --> 00:04:52,020 Ir a nuestro archivo package.json, 53 00:04:52,020 --> 00:04:56,430 si se desplaza hacia arriba, verá que en las dependencias de desarrollo, 54 00:04:56,430 --> 00:05:00,380 ahora el node-sass también se agrega a las dependencias de desarrollo. 55 00:05:00,380 --> 00:05:04,520 Ahora agregaremos un script en nuestro archivo package.jsm, 56 00:05:04,520 --> 00:05:07,015 así que la mitad de esta diapositiva, 57 00:05:07,015 --> 00:05:11,225 voy a agregar un script llamado SCSS y luego 58 00:05:11,225 --> 00:05:20,185 este script será node-sass -o CSS/, 59 00:05:20,185 --> 00:05:26,500 lo que significa que la salida de esto los archivos convertidos estarán en la carpeta CSS, 60 00:05:26,500 --> 00:05:29,715 y la fuente aquí también estará en la carpeta CSS. 61 00:05:29,715 --> 00:05:34,950 Así que todos los archivos con la extensión.scss se 62 00:05:34,950 --> 00:05:41,960 convertirán y los archivos corresponding.CSS serán generados por este node-sass.module. 63 00:05:42,270 --> 00:05:47,450 Vamos a guardar los cambios y luego vamos a ir al símbolo del sistema y luego escribir 64 00:05:47,450 --> 00:05:54,310 en npm ejecutar SCSS y esto se encargará de hacer nuestra conversión. 65 00:05:54,310 --> 00:05:56,500 Al ir al símbolo del sistema, 66 00:05:56,500 --> 00:06:02,005 escribiremos npm run SCSS y esto debería 67 00:06:02,005 --> 00:06:09,795 convertir automáticamente todos nuestros archivos SCSS en los archivos CSS correspondientes. 68 00:06:09,795 --> 00:06:11,905 Ir a nuestro editor, 69 00:06:11,905 --> 00:06:16,525 ahora ve que hay un archivo styles.css que se ha generado. 70 00:06:16,525 --> 00:06:18,530 Mirando el contenido de este archivo, 71 00:06:18,530 --> 00:06:25,000 verá que este código CSS que se ha generado a partir de nuestro código SCSS es más o menos 72 00:06:25,000 --> 00:06:32,050 el mismo que el código CSS original que escribimos nosotros mismos. 73 00:06:32,050 --> 00:06:35,875 Con esto, completamos este ejercicio. 74 00:06:35,875 --> 00:06:40,220 En este ejercicio, vimos cómo podemos escribir 75 00:06:40,220 --> 00:06:48,195 código SCSS y luego convertirlo automáticamente en su código CSS correspondiente. 76 00:06:48,195 --> 00:06:53,115 La razón por la que examinamos esto en detalle es porque 77 00:06:53,115 --> 00:06:59,190 Bootstrap proporciona sus archivos fuente en formato SCSS. 78 00:06:59,190 --> 00:07:02,370 Si visita la página de Bootstrap, 79 00:07:02,370 --> 00:07:11,795 notará que dice que Bootstrap está diseñado usando el preprocesador Sass. 80 00:07:11,795 --> 00:07:19,745 Por lo tanto, si miras cómo se convierte esto de Sass 81 00:07:19,745 --> 00:07:23,475 y cómo puedes hacer tu propia personalización 82 00:07:23,475 --> 00:07:28,115 usando el código de Bootstrap Sass, puedes ir a la documentación, 83 00:07:28,115 --> 00:07:32,025 y luego verás en 84 00:07:32,025 --> 00:07:37,610 «Opciones», tendrás algunas opciones de personalización que se están definiendo aquí. 85 00:07:39,630 --> 00:07:43,800 Varias opciones de personalización puedes ver que 86 00:07:43,800 --> 00:07:49,780 estas variables están definidas usando la sintaxis de Sass aquí, 87 00:07:49,780 --> 00:07:53,460 y también en «Herramientas de compilación», 88 00:07:53,460 --> 00:08:00,455 te explicará cómo puedes hacer tu propia personalización de Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Ahora, le recomiendo encarecidamente que no intente esto hasta que tenga 90 00:08:05,330 --> 00:08:10,515 suficiente experiencia usando Bootstrap en su vida diaria. 91 00:08:10,515 --> 00:08:12,784 Esto completa nuestro ejercicio. 92 00:08:12,784 --> 00:08:21,250 Este puede ser un buen momento para que haga una buena confirmación con el ejercicio de mensajes SCSS.