Anidaciones

Resumen

En esta clase nos vamos a concentrar en las anidaciones. Para mostrarte esto vamos a trabajar con los botones.

Sergio Toshio Minei

student•

Creo que las anidaciones pueden ser muy útiles para las pseudoclases. Algo así:

.btn {
  color: red;
  &:hover {
    color:blue;
  }
}

Alexander Valencia

student•

exacto

Jonathan Martinez Martinez

student•

Buen Aporte!

Alan Mena

student•

En proyectos grandes cuya finalidad es crear componentes reutilizables, la metodología BEM juega un papel muy importante.

SASS:

.Block {

	&__Element {

		&-Modifier {

		}
	}
}

CSS:

.Block__Element-Modifier

Daniel Martínez

teacher•

Un detalle, el Modifier, va con DOS guiones:

.Block {

	&__Element {

		&--Modifier {

		}
	}
}```

Alan Mena

student•

Incluso es válido tener una sintaxis personalizada, pues en realidad la idea es que se respete el concepto base de tener esos tres niveles. (Bloque, elemento, modificador)

En el sitio oficial de la metodología lo manejan de las dos formas:
Con uno y con dos.

Por jerarquía me hace un poco más de sentido que el modificador maneje solo un guión. Pero en efecto. Es indistinto.

Sergio Toshio Minei

student•

Anidaciones

.btn {  
  font-size: 15pt;
  &__icon {
    font-size: .6em;
  }
  &.btn--info {
    background-color: $color-info;
  }
}

El comodín & se usa para hacer referencia al padre.

Pueden ver el resumen completo del curso aquí.

Emerson Cedeño

student•

oiga mi hermano, ese repositorio de los resúmenes de los cursos suyo en github está muy elegante! felicitaciones! #aplausos

Sergio Toshio Minei

student•

muchas gracias @ecedenyo 😃

Fabricio Micheli

student•

Acá escribo una serie de definiciones interesantes para entender cada uno de los componentes de la metodología BEM:

BLOCK: Entidad individual que tiene significado por sí misma (Ej. header, container, menu, input).

ELEMENT: Parte de un bloque que no tiene sentido individual y está semánticamente vinculado a una entidad de tipo bloque (Ej. Menu item, list item, header title)

MODIFIER: Es una bandera de un bloque o elemento. Se usa para cambiar o modificar una apariencia o un comportamiento (Ej. disabled, highlighted, fixed)

Pablo Pérez Chueca

student•

¿Hay alguna forma de hacer que el IntelliSense de VS Code sugiera las variables definidas en Sass?

Francisco Manuel Velásquez Escobar

student•

Tengo la misma duda

Enrique Devars

teacher•

Pueden hacerlo con esta extensión 😃

SCSS IntelliSense

Juan C Felizzola

student•

Block Element Modifier = BEM

Para referirnos al padre usamos &

Gerardo Nava Pereda

student•

Ahora es más útil (entre otras convenciones de naming):

José Heriberto López Ruiz

student•

A partir del min. 11:03 da la impresión de que debió de haber mostrado la pantalla, pero no lo hizo. ¿Es a caso un error de edición?

Massimo Di Berardino

student•

¡Hola Jose! Gracias por tu feedback, lo vamos a comunicar al equipo para solucionarlo.

Victor Juan Morales Romo

student•

Hola Pepe el se referia a que iban en el mismo niven asi ya que btn--ejemplo se refiere a modificador si tu cliente te pide cambiarlo varias veces

.btn{
  display: inline-block;
  color: $buttoncolor;
  background-color: $buttonbackgroundcolor;
  line-height: 2.5;
  border-radius: $border-radius;
  &__icon{
    font-size: $buttonfontsize;
  }
}

.btn--info{
  background-color:$color-info;
}

Enzo Ivan Valdez

student•

Pueden declarar la variable: $font-size: 62.5%; _Y esto los dejará jugar con rem, ejemplo:: 1rem == 10px.

Pablo Andres

student•

Qué muestra acá? Alguien se da cuenta?

Enrique Espina

student•

&__icon {
    font-size:.6em;
  }
  &.btn--info {
    background-color: $color-info;
  }
}

Carlos Jesús Fernández Salazar

student•

Exacto, también se podría usar

& &--info { ... }

😄

Hernán Arica

student•

Que buen curso!!!!! lo necesitaba muchoooo gran profesor!!

Ivan Daniel Cuevas

student•

En algunas propiedades de CSS también podemos utilizar anidaciones como por el ejemplo con padding o con margin. Esto se hace de la siguiente forma:

//Código en Sass
p {
  padding: auto {
    bottom: 25px;
    top: 50px;
    right: 30px;
  }

/*Código compilado en CSS*/
p {
  padding: auto;
  padding-bottom: 25px;
  padding-top: 50px;
  padding-right: 30px;
}

Gerardo Ruiz

student•

Si llama al padre con & se heredan los atributos del padre o no los hereda?

Diego Forero

Team Platzi•

El signo de & es como un placeholder que completa con el padre para crear al final el nombre de la clase, en ningún momento pone los atributos definidos para la clase padre dentro de la clase anidada. Por ejemplo

.Boton {
    width: 100px
    &--default {
        background: blue
        color: white
    }
    &--success {
        background: green
        color: white
    }
}

Esto da como salida

.Boton {
    width: 100px
}
.Boton--default {
    background: blue
    color: white
}
.Boton--success {
    background: green
    color: white
}

Para usarlo pones la clase Boton y Boton--default en el atributo class del tag html, si usas solo Boton--default el tag no va a tener el width del 100px

Jose Antonio Padron Fernandez

student•

tengo una duda, no entendí muy bien el final del vídeo, cual de las 3 opciones es mejor para anidar?, personalmente me parece mejor la opción 1 pero quiero saber sus opiniones:

opción 1
.btn{
    &--default {
    }
    &--success {
    }
}


opción 2
.btn{
}
    btn--default {
    }
    btn--success {
    }


opción 3
.btn{
    btn--default {
    }
    btn--success {
    }
}```

jorge espinoza

student•

BEM

Anderson Gil Petit

student•

Para los que quieran profundizar en la metodologia BEM: https://en.bem.info

Asis Melgarejo Lopez

student•

La diferencia entre:

.btn .btn__info{
}```
y

.btn__info{ }

es que la primera tiene un valor de 20y la segunda un valor de 10.

Juan Vicente Cordero

student•

Para no perderse en los niveles de anidamiento, sería conveniente hacer como en otros lenguajes de programación, en la medida de lo posible de las exigencias del código, no extender los anidamientos más haya de cuatro niveles.

Jhon Alexander Romero Gonzaga

student•

http://getbem.com/

Christian Velázquez

student•

Gracias por el dato

Cesar Israel Aguilar Carrera

student•

Excelentes conceptos

Enrique Alejandro Saban

student•

No se vió lo que hizo al final.

En Bootstrap se usa por ejemplo : class="btn btn-info", se puede lograr esto ?

Yamid Vélez Muñoz

student•

Yo como propuesta, sin ser muy conocedor del frontend ni de Bootstrap usaria extend para replicar la misma funcionalidad que hace class=“btn btn-info”,

Te dejo mi propuesta o mi solución

Código sass

.btn {
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: grey;
}

.btn-info {
  @extend .btn;
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

Este código es solo un ejemplo y nos daria como resultado algo asi :

.btn, .btn-info {
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: grey;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

Considero que con esta alternativa y pensando en que son clases para usar en botones, se podria usar de la siguiente forma

&lt;button type=&quot;button&quot; class=&quot;btn-info&quot;&gt;Info&lt;/button&gt;

Fabricio Micheli

student•

Pregunta… las anidaciones son recomendables utilizarlas siempre utilizarlas con la metodología BEM? o podemos también usarlas para reflejar alguna estructura del DOM más compleja para que sea más legible en el CSS?

Edward Steven Ramos Palacios

teacher•

BEM es una metodología muy transversal. Desde mi opinión yo te recomiendo que siempre la uses, ya que de esta forma tus estilos no van acoplados a la estructura de tu HTML. BEM te permite tener tus estilos reusables.

.btn{
  display: inline-block;
  color: $buttoncolor;
  background-color: $buttonbackgroundcolor;
  line-height: 2.5;
  border-radius: $border-radius;
  &__icon{
    font-size: $buttonfontsize;
  }
}

.btn--info{
  background-color:$color-info;
}

opción 1
.btn{
    &--default {
    }
    &--success {
    }
}


opción 2
.btn{
}
    btn--default {
    }
    btn--success {
    }


opción 3
.btn{
    btn--default {
    }
    btn--success {
    }
}```

Anidaciones

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales