Ahora pasaremos al siguiente ejercicio,
donde usaremos la sintaxis de SCSS para definir
nuestras clases SCSS y convertirlas automáticamente en sus clases CSS correspondientes.
Vamos a hacer exactamente el mismo conjunto de pasos
que hicimos para el último ejercicio que acabamos de completar,
pero usando la sintaxis de SCSS.
Para empezar, en su proyecto en la carpeta CSS,
vamos a crear un nuevo archivo y nombrarlo como inicio de estilo SCSS.
Ahora en este archivo vamos a definir nuestras clases SCSS y luego
convertirlo automáticamente en nuestras clases CSS.
Así que ahí, comencemos por definir primero las variables,
así que empezaré con gris claro,
ahora he agregado algunas variables más aquí de nuevo con
los mismos nombres que usamos en el último ejercicio anterior,
pero con la sintaxis de SCSS para que
todas las variables estén precedidas con el signo de dólar para definirlos como variables.
A continuación definirá el mixin.
Entonces, para el mixin, diría mixin margen cero, pad-up-down,
pad-izquierda-derecha,
y definimos los valores como antes.
Ahora que hemos completado la definición del mixin,
podemos hacer uso de él en nuestras clases SCSS que definimos más adelante.
Ahora definamos algunas clases SCSS,
así que definiré el encabezado de fila que usaré
la mezcla de margen cero
con los valores cero píxel aquí.
Continuaremos definiendo algunas clases más que agregarán aquí,
por lo que puede ver que he definido junto con
el encabezado de la fila y el contenido de la fila donde utilicé
las mixins y el pie de página y la dirección de Jumbotron
y así sucesivamente, y puede ver el uso de
las variables que tenemos definido anteriormente en este ejemplo allí.
Obviamente, el código está disponible en las instrucciones de ejercicio que siguen a este video.
A continuación, agregaremos si anidan clases.
Al igual que hicimos en el último ejercicio,
agregaremos en la clase de carrusel con el fondo establecido en fondo oscuro y luego
dentro donde anidaremos
una clase de elemento de carrusel con la altura establecida en altura del elemento del carrusel,
y luego otra clase interna colores imagen con algunas propiedades allí,
y luego la clase de botón de carrusel como definimos anteriormente.
Así que con esto, hemos hecho los cambios en nuestras clases SCSS,
así que vamos a guardar los cambios.
Ahora, necesitamos convertir esto en su archivo CSS correspondiente.
Para convertir nuestro código fuente SCSS en el código CSS correspondiente,
vamos a tomar la ayuda de otro módulo de nodo llamado node-sass.
Permite instalar el módulo de nodo escribiendo npm
install save dev—save dev y luego node-sass.
Así que de esta manera, guardaremos este paquete node-sass
como una dependencia de desarrollo en nuestro archivo package.json.
Una vez completada la instalación,
vamos a añadir un script en nuestro archivo package.json.
Ir a nuestro archivo package.json,
si se desplaza hacia arriba, verá que en las dependencias de desarrollo,
ahora el node-sass también se agrega a las dependencias de desarrollo.
Ahora agregaremos un script en nuestro archivo package.jsm,
así que la mitad de esta diapositiva,
voy a agregar un script llamado SCSS y luego
este script será node-sass -o CSS/,
lo que significa que la salida de esto los archivos convertidos estarán en la carpeta CSS,
y la fuente aquí también estará en la carpeta CSS.
Así que todos los archivos con la extensión.scss se
convertirán y los archivos corresponding.CSS serán generados por este node-sass.module.
Vamos a guardar los cambios y luego vamos a ir al símbolo del sistema y luego escribir
en npm ejecutar SCSS y esto se encargará de hacer nuestra conversión.
Al ir al símbolo del sistema,
escribiremos npm run SCSS y esto debería
convertir automáticamente todos nuestros archivos SCSS en los archivos CSS correspondientes.
Ir a nuestro editor,
ahora ve que hay un archivo styles.css que se ha generado.
Mirando el contenido de este archivo,
verá que este código CSS que se ha generado a partir de nuestro código SCSS es más o menos
el mismo que el código CSS original que escribimos nosotros mismos.
Con esto, completamos este ejercicio.
En este ejercicio, vimos cómo podemos escribir
código SCSS y luego convertirlo automáticamente en su código CSS correspondiente.
La razón por la que examinamos esto en detalle es porque
Bootstrap proporciona sus archivos fuente en formato SCSS.
Si visita la página de Bootstrap,
notará que dice que Bootstrap está diseñado usando el preprocesador Sass.
Por lo tanto, si miras cómo se convierte esto de Sass
y cómo puedes hacer tu propia personalización
usando el código de Bootstrap Sass, puedes ir a la documentación,
y luego verás en
«Opciones», tendrás algunas opciones de personalización que se están definiendo aquí.
Varias opciones de personalización puedes ver que
estas variables están definidas usando la sintaxis de Sass aquí,
y también en «Herramientas de compilación»,
te explicará cómo puedes hacer tu propia personalización de Bootstrap.
Ahora, le recomiendo encarecidamente que no intente esto hasta que tenga
suficiente experiencia usando Bootstrap en su vida diaria.
Esto completa nuestro ejercicio.
Este puede ser un buen momento para que haga una buena confirmación con el ejercicio de mensajes SCSS.