0

Hola a todos estoy tratando de hacer una página con sass y obtengo un resultado no esperado al usar el placeholder, ¿por que no me pone todo en la misma clase para evitar la repetición de código y que estoy haciendo mal?. Lo que quiero es tener un placeholder con un elemento flex centrado para evitar ponerlo cada vez ya que es un código que uso con frecuencia.

%flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-header__container {
    @extend %flex-center;
    justify-content: space-between;
    padding: 1em;
}

El resultado

.main-header__container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-header__container {
  justify-content: space-between;
  padding: 1em;
}

Gracias a @eniel.rod por su respuesta. Acá dejo el resultado quitando la línea de código

introducir la descripción de la imagen aquí

Actualización: dejo el pdf del artículo de ombushop en el que me basé Mixins vs herencia

2
  • Lo que sucede es que sobrescribe una propiedad heredada (justify-content) y define una nueva (padding). Entonces, se genera un primer bloque con las propiedades heredadas, y un segundo bloque para redefinir, o para añadir, nuevas propiedades. Experimente quitando justify-content: space-between; a ver qué sucede
    – eniel.rod
    Commented el 8 abr. 2021 a las 3:26
  • Muchas gracias por su respuesta, da el mismo resultado, me queda solo el padding en otra clase pero con el mismo nombre. Commented el 8 abr. 2021 a las 21:24

1 respuesta 1

0

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

6
  • Excelente respuesta, muchas gracias, estoy construyendo un pequeño proyecto y lo quise realizar con sass y me basé en un artículo de ombushop que ya no está disponible pero lo tengo en notion en donde recomendaban no usar tanto mixins sino la herencia en la mayoría de casos y los mixins solo con argumentos para evitar la repetición innecesaria de código, pero vi que también se repetía código innecesario con la solución que trate de proponer, lo resolví con un mixin tal cual me propuso en la solución pero entonces cuando usar placeholders? Commented el 9 abr. 2021 a las 16:14
  • El problema que encuentro en los cursos online es que enseñan muy por encima el uso, pero cuando uno va a la práctica ahí está el problema, cuando uso el mixin y cuando el placeholder y peor aún cuando funciones y mixins jajajaja Commented el 9 abr. 2021 a las 16:16
  • Este es el enlace al artículo que guarde en pdf drive.google.com/file/d/1-me5oUEiuBz2TOwJSNQamQjapNrSBmw1/… Commented el 9 abr. 2021 a las 16:24
  • No usé el placeholder para usarlo solo una vez, lo coloqué en un parcial aparte con otros placeholders que uso con mucha frecuencia para no estar escribiendo tanto código, es la idea ade sass no? Simplificar, el flex-center lo uso a menudo, entonces la idea es poner el @extend %flex-center para no poner estas lineas siempre al igual que otras Commented el 9 abr. 2021 a las 16:32
  • @WilsonOquendo Edité la respuesta para agregar una reflexión final, nada relevante. Al final ya usted cuestionó las posibles soluciones, y sus efectos. En cuanto a cursos online, generalmente los evito, a menos que sean del creador de la tecnología. Prefiero leer un poco la documentación, es aburrido lo sé, y luego ir a los cursos, o llevar las dos cosas al mismo tiempo. Bueno nada, un gusto haberle ayudado en algo.
    – eniel.rod
    Commented el 9 abr. 2021 a las 22:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.