Es hora de pasar al siguiente ejercicio, llamado Ejercicio: Menos.
Algo que desees que tu médico
te dirá cuando lo visites la próxima vez.
Sin embargo, vamos a examinar menos con más detalle ahora para entender cómo podemos definir
clases CSS usando la sintaxis menos preprocesador y luego
generar automáticamente las clases CSS correspondientes de nuestras clases menos clases.
Para empezar, vamos a
nuestro proyecto en el Editor de texto y luego dentro de la carpeta CSS,
voy a cambiar el nombre de este archivo styles.css como styles-old.css.
Voy a guardar mi versión actual del
archivo styles.css porque ahora escribirán menos código
y código SCSS y luego generarán automáticamente el
archivo styles.css compilando estos lenguajes de preprocesador CSS.
Después de hacer esto, entonces en mi carpeta CSS,
crearemos un nuevo archivo llamado styles.less.
Y aquí dentro, definiré mi código menos.
Primero definamos algunas variables menos.
Diré, lt-grey: ddd y así sucesivamente.
Puede ver que he agregado algunas variables menos aquí.
Por lo tanto, definí el fondo oscuro para ser el primer valor, la
luz de fondo y el fondo pálido y también
una variable más llamada carrusel item-height como 300 píxeles.
Voy a hacer uso de estas variables cuando defina mis clases CSS más adelante.
Permítanme ahora agregar un Mixin para
mi archivo menos llamado cero margen y definiré pad-up-dn
y pad-left-right,
0px siendo el valor predeterminado y luego aquí,
estableceré margen: 0px auto,
relleno: pat-up-dn
y pad-izquierda-derecha.
Entonces, con esto, he definido el Mixin que voy a
hacer uso en mis clases CSS que definiremos más adelante.
Y esto lleva dos parámetros pad-up-dn y pad-izquierda-derecha.
A continuación, agregaré algunas clases CSS más, así que empiezo con el
encabezado de fila y definiré esto como margen cero.
Permítanme agregar algunas clases CSS más y luego volver a echarles un vistazo.
Aquí, he definido otra clase CSS
usando el Mixin de margen cero con los parámetros de 50 píxeles y 0 píxeles,
un pie de página donde defino el color de fondo usando
la variable que se definió anteriormente como
fondo pálido y luego jumbotron con
el Mixin de margen cero y el color de fondo definido como luz de fondo,
y algunos de estos otros que son clases CSS estándar,
que he incluido allí porque voy a hacer uso de ellos en
mi página web y luego tienes
navbar-dark para el cual el color de fondo que sí nos definí background-dark.
Y el contenido de la pestaña para el que de nuevo me ves
usando la variable gris claro para el color del borde aquí.
A continuación, agrego en la clase carrusel aquí para
la cual defino el fondo como fondo oscuro aquí y luego,
defino ese carrusel item.
Tenga en cuenta, cómo defino eso como un elemento anidado dentro de mi carrusel y para el carrusel item,
defino la altura como carrusel item-height aquí,
que es una variable que definí antes y dentro de allí,
defino la imagen,
que es otra vez otro elemento anidado dentro del carrusel item y luego para la imagen,
definiré algunas propiedades CSS a continuación.
Como puede ver,
he definido algunas propiedades para la imagen.
Aquí, ves el uso de clases anidadas aquí,
por lo que tienes carrusel y dentro de eso tengo un elemento carrusel y dentro de eso,
una imagen definida aquí.
Finalmente, en la parte inferior,
agrego la clase CarouselButton,
que se usa para especificar el CarouselButton.
Con estos cambios en mi archivo styles.less agregando todas las menos clases aquí,
permítanme guardar los cambios.
Ahora, quiero poder convertir esto automáticamente en su archivo CSS correspondiente.
Para convertir automáticamente mi archivo menos en su archivo CSS correspondiente,
voy a hacer uso de un módulo de nodo llamado como menos.
Para instalar eso en el símbolo del sistema,
escribo sudo npm install menos g menos.
Instalo esto como un módulo de nodo global.
Y una vez que esté instalado,
pondrá a disposición un compilador menos llamado como lessc en el símbolo del sistema.
Si está ejecutando esto en una máquina con Windows,
no necesita hacer sudo,
como probablemente ya recuerde.
Ahora que hemos instalado el compilador lessc,
voy a compilar mi código menos en su código CSS correspondiente.
Para hacer eso, déjame ir a la carpeta CSS y luego aquí,
verás que tienes el archivo styles.less.
En el símbolo del sistema, escriba lessc styles.less styles.css,
y una vez que complete la compilación,
tendrá el archivo CSS correspondiente.
Entonces, como puede ver ahora,
tiene el menor código que se convierte en el código CSS correspondiente.
Echando un vistazo al código CSS generado desde el código menos,
verá que este código se ve casi
igual que lo que definimos en nuestro archivo CSS original.
Con esto, completamos este ejercicio.
En este ejercicio, hemos aprendido cómo escribir
menos código y luego convertirlo automáticamente en el código CSS correspondiente.
En este punto, es posible que desee guardar los cambios en
su repositorio de Git con el mensaje Ejercicio: Menos.