Sergio Toshio Minei
Alexander Valencia
Jonathan Martinez Martinez
Alan Mena
Daniel Martínez
Alan Mena
Sergio Toshio Minei
Emerson Cedeño
Sergio Toshio Minei
Fabricio Micheli
Pablo Pérez Chueca
Francisco Manuel Velásquez Escobar
Enrique Devars
Juan C Felizzola
Gerardo Nava Pereda
José Heriberto López Ruiz
Massimo Di Berardino
Victor Juan Morales Romo
Enzo Ivan Valdez
Pablo Andres
Enrique Espina
Carlos Jesús Fernández Salazar
Hernán Arica
Ivan Daniel Cuevas
Gerardo Ruiz
Diego Forero
Jose Antonio Padron Fernandez
jorge espinoza
Anderson Gil Petit
Asis Melgarejo Lopez
Juan Vicente Cordero
Jhon Alexander Romero Gonzaga
Christian Velázquez
Cesar Israel Aguilar Carrera
Enrique Alejandro Saban
Yamid Vélez Muñoz
Fabricio Micheli
Edward Steven Ramos Palacios
Creo que las anidaciones pueden ser muy útiles para las pseudoclases. Algo así:
.btn { color: red; &:hover { color:blue; } }
exacto
Buen Aporte!
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
Un detalle, el Modifier, va con DOS guiones:
.Block { &__Element { &--Modifier { } } }```
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.
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í.
oiga mi hermano, ese repositorio de los resúmenes de los cursos suyo en github está muy elegante! felicitaciones! #aplausos
muchas gracias @ecedenyo 😃
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)
¿Hay alguna forma de hacer que el IntelliSense de VS Code sugiera las variables definidas en Sass?
Tengo la misma duda
Pueden hacerlo con esta extensión 😃
SCSS IntelliSense
Block Element Modifier = BEM
Para referirnos al padre usamos &
Ahora es más útil (entre otras convenciones de naming):
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?
¡Hola Jose! Gracias por tu feedback, lo vamos a comunicar al equipo para solucionarlo.
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; }
Pueden declarar la variable: $font-size: 62.5%; _Y esto los dejará jugar con rem, ejemplo:: 1rem == 10px.
Qué muestra acá? Alguien se da cuenta?
&__icon { font-size:.6em; } &.btn--info { background-color: $color-info; } }
Exacto, también se podría usar
& &--info { ... }
😄
Que buen curso!!!!! lo necesitaba muchoooo gran profesor!!
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; }
Si llama al padre con & se heredan los atributos del padre o no los hereda?
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
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 { } }```
BEM
Para los que quieran profundizar en la metodologia BEM: https://en.bem.info
La diferencia entre:
.btn .btn__info{ }``` y
.btn__info{ }
es que la primera tiene un valor de 20y la segunda un valor de 10.
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.
Gracias por el dato
Excelentes conceptos
No se vió lo que hizo al final.
En Bootstrap se usa por ejemplo : class="btn btn-info", se puede lograr esto ?
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
<button type="button" class="btn-info">Info</button>
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?
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.
