[MÚSICA]
Esta lección en particular trata de los preprocesadores CSS,
en particular Less y Sass.
Ahora, obviamente, estos temas tienen más que ver con CSS y la
definición de clases CSS, pero sería inapropiado
para mí completar un curso de Bootstrap sin
profundizar un poco en los preprocesadores CSS.
Simplemente porque Bootstrap está construido usando Sass para su fuente.
Por lo tanto, examinaremos brevemente los preprocesadores CSS,
qué son, cómo son útiles en la definición de clases CSS
y por qué Bootstrap los utiliza.
Como probablemente entienda por su experiencia anterior con CSS,
CSS es ideal para definir estilos y
aplicar repetidamente estos estilos a varios elementos HTML.
Y así es como usamos CSS cuando definimos nuestras páginas web.
Pero cuando miras el código CSS en sí,
comienzas a darte cuenta rápidamente de las limitaciones de CSS.
Especialmente si viene de un fondo de programación, se da cuenta de que
CSS no tiene lo que normalmente espera en un lenguaje de programación, como variables,
anidamiento de selectores, variables, expresiones y funciones.
Esto significa que escribir código CSS se vuelve engorroso, y
mantener el código CSS se vuelve engorroso debido a la
falta de la sintaxis tradicional similar al lenguaje de programación.
Ahora, aquí es donde los preprocesadores CSS vienen a nuestro rescate.
Hay varios preprocesadores CSS populares que intentan abordar algunas de
las deficiencias de CSS apoyando muchas de estas características.
Dos en particular que es de interés para nosotros es Less y Sass.
Vamos a ver estos dos con más detalle en esta lección.
Ahora, cuando define sus clases CSS usando uno
de estos lenguajes de preprocesador como Less o
Sass, eventualmente tienen que convertirse en CSS,
pero esto se puede hacer automáticamente antes de que el CSS se use en su página web.
Lo que estos lenguajes de preprocesamiento nos traen es una
sintaxis más similar al lenguaje de programación, como veremos en las próximas diapositivas.
Examinaremos a Less y Sass brevemente.
En particular, la razón para echar un vistazo a esto es porque Bootstrap
usa Sass para definir su fuente para sus clases CSS.
Y entonces, si entras en la personalización de Bootstrap,
entonces tendrías que trabajar con el código Sass.
Bootstrap 3, que era la versión anterior de Bootstrap, usó Less
, y por lo tanto, pensé que sería algo apropiado cubrir Less y
Sass, porque son bastante similares entre sí
en términos de sus capacidades y la forma en que se define la sintaxis.
Las características típicas que aportan los preprocesadores CSS es el soporte para
variables, selectores de anidamiento, expresiones, funciones y mixins.
Así que veremos algunas de ellas con algunos ejemplos en las siguientes diapositivas.
Lo primero que veremos son las variables.
Ahora, en muchas clases CSS que define,
es posible que tenga un uso repetido de ciertas cantidades.
Podría valer más la pena si define algunas variables que
contienen estas cantidades y usa estas variables en la definición de sus clases CSS.
Así que ahí es donde las variables vienen a tu rescate.
Aquí, veremos tanto el código Less como el código SCSS.
Scss es una versión de Sass,
versión más popular de la sintaxis de Sass, así que es por eso que me concentro en Scss aquí.
Por lo tanto, si define variables en Less,
procederá con el nombre de la variable con un signo @.
En el caso de Scss, usará un signo de dólar antes del nombre de la variable.
Y una vez que defina esas variables,
puede usar esas variables cuando defina las clases.
Como puede ver en el ejemplo, donde definimos la barra de navegación inversa como fondo,
o la altura del elemento carrusel como variables.
Ahora, la ventaja de definir variables al inicio de su clase CSS
es que hay un único punto donde puede actualizar un valor, y
actualizará automáticamente todas las clases CSS que usan esta variable.
Normalmente, la forma en que utilizamos variables en lenguajes de programación.
Las variables en los lenguajes de preprocesador CSS también pueden tener su propio alcance.
Muy a menudo cuando define clases CSS, especialmente cuando
tiene que definir clases que están anidadas dentro de otras clases,
entonces, muy pronto su código CSS se vuelve muy engorroso.
Entonces, aquí es donde el anidamiento es compatible con sus preprocesadores CSS.
Como puede ver, puede definir, por ejemplo, una clase de carrusel, y
dentro de una clase de carrusel, puede definir una clase de elemento de carrusel.
Y de manera similar, la subclase de imagen dentro de la clase de elemento del carrusel.
Así que aquí puede ver que cada uno de estos está anidado dentro de una clase anterior.
Con las variables, puede contener un valor a la vez en una variable.
Supongamos que tiene un grupo de variables que resumidas
declaran un conjunto de declaraciones CSS, ahí es donde hacemos uso de mixins.
En Less, define un mixin dándole un nombre,
y en Sass simplemente precede eso con un @mixin
delante del nombre de la declaración mixin.
Y dentro de un mixin, puede definir un montón de declaraciones CSS
que luego se pueden reutilizar para varias clases CSS.
Como puede ver en este ejemplo aquí, definimos el margen cero
como un mixin, tanto en Less como en Sass.
Tenga en cuenta la variación menor en la sintaxis en cada uno de esos casos.
Y luego, puede usar este mixin en la definición de clases CSS adicionales.
Así que aquí puede ver que para el encabezado de fila, definimos el margen cero como
un mixin en el encabezado de fila, lo que significa que todas
estas propiedades del margen cero serán heredadas por esa clase de encabezado de fila.
Los mixins pueden asumir parámetros adicionales si así lo desea definirlos.
Entonces, en este caso, estoy definiendo
una variación de la mezcla de margen cero que vimos en la diapositiva anterior.
Aquí, este mixin de margen cero toma dos parámetros,
pad arriba abajo y pad izquierda derecha.
Y con Less, incluso puede especificar el valor predeterminado para él,
pero con Scss necesita especificar explícitamente los valores.
Así que aquí estamos definiendo dos propiedades CSS diferentes, el margen y el
relleno, y luego el relleno en sí utiliza los parámetros para nuestro mixin allí.
Entonces, en ese caso, puede usar estos mixins como ve en
las dos clases CSS definidas debajo del encabezado de fila y
el contenido de la fila especificando sus valores de parámetro
cuando incluya ese mixin en su clúster CSS.
No solo eso, incluso puede realizar operaciones matemáticas en
variables predefinidas cuando las usa dentro de sus clases CSS.
Así que aquí se puede ver que he definido dos elementos diferentes del carrusel
con dos tamaños diferentes, y así
se puede ver que las alturas de cada uno de ellos se definen de manera diferente.
En un caso, estoy usando la altura predefinida, en otro caso
estoy multiplicando esa altura y luego la uso para definir la
propiedad height dentro de mi elemento de carrusel para la clase item-large.
Por lo tanto, este tipo de operaciones matemáticas en
variables también está permitido en lenguajes de preprocesador CSS.
Otras características que incluyen los preprocesadores CSS
son funciones que permiten definir funciones matemáticas, Menos cadenas.
También puede hacer operaciones de color y operaciones de mezcla de colores utilizando estas funciones
y hacer uso de ellas cuando defina sus clases CSS.
Esto es un poco avanzado, así que no voy a entrar en demasiados detalles allí.
Además, puede introducir clases preprocesadores CSS predefinidas en otras clases.
Entonces, por ejemplo, si tiene una clase Less como está definida, y
puede ingresar ese archivo en otro archivo Less.
Del mismo modo, si ha definido archivos Scss
, puede importarlos a otros archivos Scss mediante la operación de importación.
La sintaxis es la misma para Less y Sass.
Ahora que hemos visto algunas características de los lenguajes de preprocesador CSS, vamos a
examinar cómo podemos realmente hacer uso de ellos haciendo un par de ejercicios.
Primero, haremos un ejercicio basado en Menos.
Luego seguiremos eso con un ejercicio basado en Sass.
[ MÚSICA]