No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Implementando mixins en el proyecto

14/20
Recursos

Aportes 7

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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