1
00:00:03,290 --> 00:00:09,780
Es hora de pasar al siguiente ejercicio, llamado Ejercicio: Menos.

2
00:00:09,780 --> 00:00:12,860
Algo que desees que tu médico

3
00:00:12,860 --> 00:00:16,380
te dirá cuando lo visites la próxima vez.

4
00:00:16,380 --> 00:00:25,515
Sin embargo, vamos a examinar menos con más detalle ahora para entender cómo podemos definir

5
00:00:25,515 --> 00:00:31,830
clases CSS usando la sintaxis menos preprocesador y luego

6
00:00:31,830 --> 00:00:38,725
generar automáticamente las clases CSS correspondientes de nuestras clases menos clases.

7
00:00:38,725 --> 00:00:42,630
Para empezar, vamos a

8
00:00:42,630 --> 00:00:51,865
nuestro proyecto en el Editor de texto y luego dentro de la carpeta CSS,

9
00:00:51,865 --> 00:00:58,750
voy a cambiar el nombre de este archivo styles.css como styles-old.css.

10
00:00:58,750 --> 00:01:03,870
Voy a guardar mi versión actual del

11
00:01:03,870 --> 00:01:08,685
archivo styles.css porque ahora escribirán menos código

12
00:01:08,685 --> 00:01:13,200
y código SCSS y luego generarán automáticamente el

13
00:01:13,200 --> 00:01:19,165
archivo styles.css compilando estos lenguajes de preprocesador CSS.

14
00:01:19,165 --> 00:01:23,300
Después de hacer esto, entonces en mi carpeta CSS,

15
00:01:23,300 --> 00:01:31,280
crearemos un nuevo archivo llamado styles.less.

16
00:01:32,070 --> 00:01:37,290
Y aquí dentro, definiré mi código menos.

17
00:01:37,290 --> 00:01:41,800
Primero definamos algunas variables menos.

18
00:01:41,800 --> 00:01:52,420
Diré, lt-grey: ddd y así sucesivamente.

19
00:01:52,420 --> 00:01:57,980
Puede ver que he agregado algunas variables menos aquí.

20
00:01:57,980 --> 00:02:02,310
Por lo tanto, definí el fondo oscuro para ser el primer valor, la

21
00:02:02,310 --> 00:02:05,850
luz de fondo y el fondo pálido y también

22
00:02:05,850 --> 00:02:11,235
una variable más llamada carrusel item-height como 300 píxeles.

23
00:02:11,235 --> 00:02:17,305
Voy a hacer uso de estas variables cuando defina mis clases CSS más adelante.

24
00:02:17,305 --> 00:02:22,995
Permítanme ahora agregar un Mixin para

25
00:02:22,995 --> 00:02:31,130
mi archivo menos llamado cero margen y definiré pad-up-dn

26
00:02:41,320 --> 00:02:48,760
y pad-left-right,

27
00:02:48,760 --> 00:02:55,725
0px siendo el valor predeterminado y luego aquí,

28
00:02:55,725 --> 00:03:01,620
estableceré margen: 0px auto,

29
00:03:01,620 --> 00:03:11,520
relleno: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
y pad-izquierda-derecha.

31
00:03:14,460 --> 00:03:20,180
Entonces, con esto, he definido el Mixin que voy a

32
00:03:20,180 --> 00:03:25,785
hacer uso en mis clases CSS que definiremos más adelante.

33
00:03:25,785 --> 00:03:31,265
Y esto lleva dos parámetros pad-up-dn y pad-izquierda-derecha.

34
00:03:31,265 --> 00:03:39,740
A continuación, agregaré algunas clases CSS más, así que empiezo con el

35
00:03:39,740 --> 00:03:50,435
encabezado de fila y definiré esto como margen cero.

36
00:03:50,435 --> 00:03:57,560
Permítanme agregar algunas clases CSS más y luego volver a echarles un vistazo.

37
00:03:57,560 --> 00:04:01,170
Aquí, he definido otra clase CSS

38
00:04:01,170 --> 00:04:06,480
usando el Mixin de margen cero con los parámetros de 50 píxeles y 0 píxeles,

39
00:04:06,480 --> 00:04:10,790
un pie de página donde defino el color de fondo usando

40
00:04:10,790 --> 00:04:15,660
la variable que se definió anteriormente como

41
00:04:15,660 --> 00:04:19,940
fondo pálido y luego jumbotron con

42
00:04:19,940 --> 00:04:25,885
el Mixin de margen cero y el color de fondo definido como luz de fondo,

43
00:04:25,885 --> 00:04:30,200
y algunos de estos otros que son clases CSS estándar,

44
00:04:30,200 --> 00:04:34,610
que he incluido allí porque voy a hacer uso de ellos en

45
00:04:34,610 --> 00:04:38,010
mi página web y luego tienes

46
00:04:38,010 --> 00:04:42,850
navbar-dark para el cual el color de fondo que sí nos definí background-dark.

47
00:04:42,850 --> 00:04:46,980
Y el contenido de la pestaña para el que de nuevo me ves

48
00:04:46,980 --> 00:04:51,820
usando la variable gris claro para el color del borde aquí.

49
00:04:51,820 --> 00:04:58,700
A continuación, agrego en la clase carrusel aquí para

50
00:04:58,700 --> 00:05:06,010
la cual defino el fondo como fondo oscuro aquí y luego,

51
00:05:06,010 --> 00:05:10,540
defino ese carrusel item.

52
00:05:10,540 --> 00:05:18,225
Tenga en cuenta, cómo defino eso como un elemento anidado dentro de mi carrusel y para el carrusel item,

53
00:05:18,225 --> 00:05:24,225
defino la altura como carrusel item-height aquí,

54
00:05:24,225 --> 00:05:28,965
que es una variable que definí antes y dentro de allí,

55
00:05:28,965 --> 00:05:31,005
defino la imagen,

56
00:05:31,005 --> 00:05:36,635
que es otra vez otro elemento anidado dentro del carrusel item y luego para la imagen,

57
00:05:36,635 --> 00:05:40,010
definiré algunas propiedades CSS a continuación.

58
00:05:40,010 --> 00:05:42,650
Como puede ver,

59
00:05:42,650 --> 00:05:46,200
he definido algunas propiedades para la imagen.

60
00:05:46,200 --> 00:05:50,950
Aquí, ves el uso de clases anidadas aquí,

61
00:05:50,950 --> 00:05:55,305
por lo que tienes carrusel y dentro de eso tengo un elemento carrusel y dentro de eso,

62
00:05:55,305 --> 00:05:57,145
una imagen definida aquí.

63
00:05:57,145 --> 00:05:58,945
Finalmente, en la parte inferior,

64
00:05:58,945 --> 00:06:02,075
agrego la clase CarouselButton,

65
00:06:02,075 --> 00:06:07,605
que se usa para especificar el CarouselButton.

66
00:06:07,605 --> 00:06:14,935
Con estos cambios en mi archivo styles.less agregando todas las menos clases aquí,

67
00:06:14,935 --> 00:06:16,465
permítanme guardar los cambios.

68
00:06:16,465 --> 00:06:23,230
Ahora, quiero poder convertir esto automáticamente en su archivo CSS correspondiente.

69
00:06:23,230 --> 00:06:28,875
Para convertir automáticamente mi archivo menos en su archivo CSS correspondiente,

70
00:06:28,875 --> 00:06:32,660
voy a hacer uso de un módulo de nodo llamado como menos.

71
00:06:32,660 --> 00:06:35,015
Para instalar eso en el símbolo del sistema,

72
00:06:35,015 --> 00:06:41,085
escribo sudo npm install menos g menos.

73
00:06:41,085 --> 00:06:47,150
Instalo esto como un módulo de nodo global.

74
00:06:47,150 --> 00:06:54,555
Y una vez que esté instalado,

75
00:06:54,555 --> 00:07:01,985
pondrá a disposición un compilador menos llamado como lessc en el símbolo del sistema.

76
00:07:01,985 --> 00:07:04,570
Si está ejecutando esto en una máquina con Windows,

77
00:07:04,570 --> 00:07:06,130
no necesita hacer sudo,

78
00:07:06,130 --> 00:07:09,900
como probablemente ya recuerde.

79
00:07:09,900 --> 00:07:14,565
Ahora que hemos instalado el compilador lessc,

80
00:07:14,565 --> 00:07:21,010
voy a compilar mi código menos en su código CSS correspondiente.

81
00:07:21,010 --> 00:07:26,290
Para hacer eso, déjame ir a la carpeta CSS y luego aquí,

82
00:07:26,290 --> 00:07:29,650
verás que tienes el archivo styles.less.

83
00:07:29,650 --> 00:07:38,909
En el símbolo del sistema, escriba lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
y una vez que complete la compilación,

85
00:07:43,010 --> 00:07:45,580
tendrá el archivo CSS correspondiente.

86
00:07:45,580 --> 00:07:47,580
Entonces, como puede ver ahora,

87
00:07:47,580 --> 00:07:53,565
tiene el menor código que se convierte en el código CSS correspondiente.

88
00:07:53,565 --> 00:07:59,310
Echando un vistazo al código CSS generado desde el código menos,

89
00:07:59,310 --> 00:08:02,910
verá que este código se ve casi

90
00:08:02,910 --> 00:08:08,075
igual que lo que definimos en nuestro archivo CSS original.

91
00:08:08,075 --> 00:08:11,270
Con esto, completamos este ejercicio.

92
00:08:11,270 --> 00:08:15,515
En este ejercicio, hemos aprendido cómo escribir

93
00:08:15,515 --> 00:08:21,525
menos código y luego convertirlo automáticamente en el código CSS correspondiente.

94
00:08:21,525 --> 00:08:26,155
En este punto, es posible que desee guardar los cambios en

95
00:08:26,155 --> 00:08:32,410
su repositorio de Git con el mensaje Ejercicio: Menos.