Analicemos qué sucede. Adicione a su código la siguiente regla
.scnd-header__container {
@extend %flex-center;
padding: 2em;
}
EL resultado será el siguiente
.scnd-header__container, .main-header__container {
display: flex;
justify-content: center;
align-items: center;
}
.main-header__container {
justify-content: space-between;
padding: 1em;
}
.scnd-header__container {
padding: 2em;
}
¿Se percató de lo que hace un @extend
?
Mire esta variante (flex-center
ahora representa una clase)
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.main-header__container {
@extend .flex-center;
justify-content: space-between;
padding: 1em;
}
Resultado
.flex-center, .main-header__container {
display: flex;
justify-content: center;
align-items: center;
}
.main-header__container {
justify-content: space-between;
padding: 1em;
}
Sass toma estas reglas que contienen la instrucción @extend
(y la extendida, si no es un placeholder %
) y las coloca en una regla CSS de múltiples selectores, de modo que el código extendido se aplique a todos. Y de estas reglas que extienden de otra, y que tienen declaraciones propias, van a resultar nuevas reglas independientes para definir sus particularidades.
Esto es:
selector-extendido, selector-extiende1, selector-extiende2, .... {
/*declaraciones comunes*/
}
selector-extiende1 {
/*declaraciones propias*/
}
selector-extiende2 {
/*declaraciones propias*/
}
Otra cosa, ¿por qué utilizar un selector placeholder (%
) con el objetivo de extenderlo sólo una vez?
También puede valorar utilizar Mixins, por ejemplo
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.main-header__container {
@include flex-center;
justify-content: space-between;
padding: 1em;
}
.scnd-header__container {
@include flex-center;
padding: 2em;
}
Resultado
.main-header__container {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
padding: 1em;
}
.scnd-header__container {
display: flex;
justify-content: center;
align-items: center;
padding: 2em;
}
Ahí tenemos un "problema" (no es un error), no se "ve bien" redefinir justify-content
, modifiquemos el código
@mixin flex-center($j-content: center) {
display: flex;
justify-content: $j-content;
align-items: center;
}
.main-header__container {
@include flex-center(space-between);
padding: 1em;
}
.scnd-header__container {
@include flex-center;
padding: 2em;
}
Ahora, le corresponde a usted como desarrollador decidir que es más conveniente para su problema (claro, valorando la doc de Sass)
Esto
.scnd-header__container, .main-header__container {
display: flex;
justify-content: center;
align-items: center;
}
.main-header__container {
justify-content: space-between;
padding: 1em;
}
.scnd-header__container {
padding: 2em;
}
O esto
.main-header__container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
}
.scnd-header__container {
display: flex;
justify-content: center;
align-items: center;
padding: 2em;
}
Referencias
Sass @extend
Sass @mixin
Sass placeholder selectors