Implementando mixins en el proyecto

Los @mixen aceptan también parámetros opcionales:

Simplemente, hay que asignarle el valor por defecto ( en mi caso null* )

@mixin flexCenter($direction, $content: null, $align: null){
    display: flex;
    flex-direction: $direction;
    justify-content: $content;
    align-items: $align;
}

y luego pueden usar, sin especificar ese parámetro:

@include flexCenter(row, space-between, center);
@include flexCenter(column, space-around);
@include flexCenter(column);

La cantidad de líneas que nos ahorran los mixins ;D

a continuacion le smando un minxien para los estilos del svg:

// MIxin para cambiar el tamaño y color de los iconos svg

@mixin svgStyle ($color, $width, $height){
    svg {
        width: $width;
        height: $height;
        path {
            stroke: $color; 
        }
    } 
}

// Ejemplo en los iconos del nav:

nav {
    width: auto;
    @include flexCenter(row,space-between ,center ); 
    padding: 15px;
    background-color: $primary-color;
    color: $primary-text-color;
    p {
        font-size: $paragraph-size;
        padding-left: 30px;
    }
    .icons {
        display: flex;
        gap: 15px;
        @include buttonStyle;
//este es el includ mixen:
        @include svgStyle($primary-text-color,36px ,36px )
    }
}

Si no le practico ni lo entiendo.

Hola!
AL momento de utilziar “@include buttonStyle” en el buton que si tenia un color de background, la razon, de porque el estilo que venia ya en el mixin, de no tener un background, no es aplicado, es debido a que estamos trabajando con CSS, todo funciona en forma de cascada, el ultimo estilo aplicado es el que veremos en nuestro html.

Genial–!

Implementé mixins en el estilo para el elemento img…

@mixin imageStyle {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

Acá no es button-style...es Flex-content :P