Claudio Romano
PreguntaPara el que no entendió la diferencia entre @mixin y @extend
A los @mixin los usaremos como funciones. Por ejemplo:
@mixin fontStyle($color, fontSize) {
font-size: $fontSize;
color: red
background-color: $color;
text-transform: uppercase;
h1 {
@include fontStyle(blue, 40px)
}
------------x-------------
Mientras que con los @extend llamamos a valores ya declarados.
Por ejemplo:
@mixin fontStyle($color, fontSize) {
font-size: $fontSize;
color: red
background-color: $color;
text-transform: uppercase; <— Volví a utilizar el @mixin anterior, ya que también se pueden combinar
//Aquí estamos llamando a una clase
.alerta {
padding: 15px
font-weight: normal;
margin-bottom: 1
color: #fff
@include fontStyle(red, 15px)
.acceso {
@extend .alerta; Acá estamos llamando la clase “.alerta” ya declarada, utilizando el @extend
Alex Camacho
Como bien dices los mixins son más como funciones que puedes llamar en cualquier momento y los extends yo lo veo más como una interface que ya trae lo que debes de usar.
