Anidaciones

Clase 7 de 13 • Curso de Less 2018

Resumen

Para esta clase vamos a usar unas variables que vamos a usar para los botones.

Jose Daniel Barría Reyes

student•

nesting: podemos agregar pseudoselectores (tales como :hover) dentro de la clase general, con el caracter & referenciamos al padre.(anidacion en spanish)

//less
.btn{
	//properties
	&:hover{
		//properties
	}
}

Harold David Avila Sabogal

student•

Gracias

Pau Pregoni Juan

student•

Estaría bueno poder ver el output de lo que se está haciendo.

Miguel Angel Reyes Moreno

student•

Pues no te cuesta hacerlo, es tan sencillo como llamar a la hoja que contendrá todos los import:

Jose Daniel Barría Reyes

student•

Siempre incluir los parciales!

Jose Daniel Barría Reyes

student•

agregar las variables primero, luego los elementos de base

Harold David Avila Sabogal

student•

Buen apunte

Andrés Vega

student•

La respuesta exacta es que al tener mas anidaciones, más reusabilidad perdemos.

Andrés Guamán Chaparro

student•

¿Por qué?

Juan Esteban Galvis

student•

Correcto, al ir anidando solo servirá para ese orden, por ejemplo:

.btn{} -> Sirve para todo lo que le pongamos esa clase Re-utilizable

.btn .card .boton a{} -> SOLO sirve para el enlace que cumpla con toda esa anidacion, por ende No es re-utilizable

Además, como se enseña al principio del curso de preprocesadores CSS mientras mas especifico (clase, id, etiqueta) menos posible es modificar sus estilos.

Juliana Abad

student•

Por que es necesario manejar la escala de grises?

Juan Esteban Galvis

student•

En este caso es ejemplo, pero un uso práctico no con grises sería por ejemplo tener una escala de color.

Por ejemplo, desde el azul oscuro al casi blanco y que todos usen la misma escala o paleta de colores.

Belén Sosa

student•

Hola, tienen idea por qué me aparecen esos comentarios y si hay forma de que dejen de aparecer?

Erik Elyager

student•

Me suena a que es alguna extensión, deshabilita las extensiones y prueba si desaparecen, en caso de que sí, va a tocar buscar cuál es la causante.

Para deshabilitar presiona Ctrl + Shift + P en windows o command + shift + p en Macos y busca la opción:

Angélica Rocha

student•

¿Cuántas anidaciones me recomendarían tener ?

Jhonatan David Ibarra Lavado

student•

sigamos :D

Miguel Angel Lozano Alvarez

student•

Se puede hacer una variable para el hover

Jorge Cruz Perez

student•

Partiendo desde el concepto de variable, donde vas a guardar un valor, considero que no, al meneos en ese sentido se entiende tu pregunta, saludos :)

Gerardo Manuel Reyes Fernández

student•

-Es preferible una clase demás a un selector demás.

No se si entendí muy bien la clase. Lo que entendí es que existe lamanera de anidar pero no hay que abusar de este recurso.
Esta clase me recuerda un poco al principio de Single Responsability que se usa en programación.

Harold David Avila Sabogal

student•

exacto puedes usar este recurso pero es mejor no abusar de el dado que puede traer problemas

Angélica Rocha

student•

Es mejor más clases que selectores :D

Estiventh Leonardo Neira Aldana

student•

En realidad en BEM un botón vendría siendo un elemento, no un bloque

Héctor Eduardo López Carballo

student•

Pero creo que el botón siempre seria el mismo sin importar su contexto, su cambio estaría relacionado con los modificadores nada más... Aún hay cosas de BEM que no tengo bien definidas. :s

Estiventh Leonardo Neira Aldana

student•

Precisamente por eso vendría siendo un elemento. Ya que un elemento puede formar parte de varios bloques, un bloque no puede ser parte de otro bloque jajaja

Platzi Team

student•

Es preferible una clase de mas que un selector :o

Andrés Alejandro Ramos Uyaban

student•

¿No existe alguna extensión de VSC que me ayude para recordar las variables, mixins, funciones etc.. que están creadas en los otros archivos?

Jorge Wenner Arévalo Alvis

student•

😃

Fernando Galdós

student•

Gran clase.

Raycris Maldonado

student•

En la metodología BEM poner dobles guinoes quiere decir que se trata de una modificación, ejemplo .btn--alert

Andrés David Loaiza Zamudio

student•

Bien aprender esto!

Anidaciones

Cómo funciona Less

¿Dónde aprender CSS con preprocesadores?

Qué aprendrás sobre preprocesadores

Qué aprenderás sobre Less

Instalación de Less

Tutorial y Reto

Variables: Definición y ejemplos

Anidaciones

Mixins

Mixins Paramétricos

Solución del reto

Funciones de Less

Ejemplo de funciones con Less

Controles de Flujo