Mixins de Flexbox con parámetros en SASS
Contenido del curso
LUIS ANTONIO CALVO QUISPE
Benjamin Allen Ramirez Horna
Miguel Negron Garcia
----- ----
Nestor Rios Garcia
Fritz Guzmán Santiago
Nestor Rios Garcia
iecgerman .
Ricardo Collado
Any Omaña
Mateo Muñoz Bustamante
JOSE MARIA SUAREZ GIESE
Diego Andrés Lopez Rodriguez
Henry Alexander Velásquez Rosas
Ángela Sofía Osorio García
Henry Alexander Velásquez Rosas
Ivan Camilo Buitrago Buitrago
Ivan Camilo Buitrago Buitrago
Ivan Camilo Buitrago Buitrago
Pablo Alejandro Figueroa
Libian María Hernández Gil
Ariel Hernán Contini
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);
puse mixen y no me funciono
Benjamin121_00, Entiendo que no te funcino ya que escribiste mal la palabra mixin. Si nos fijamos bien, Luis122448 puso en el codigo @mixin y no @mixen. Ojala te sirva.
La cantidad de líneas que nos ahorran los mixins ;D
Amen hermano.
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 ) } }
Me ayudo mucho, le agregué un parámetro más:
@mixin svgStyle ($color, $width, $height, $hovercolor: null){ svg { width: $width; height: $height; path { stroke: $color; } } svg:hover {fill: $hovercolor;} }
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.
Gracias Ana! Voy a implementar mixins y vuelvo para comentar qué tal me fue 🤗
Les comparto este mixin para estilizar los textos```css @mixin fontStyle($font-weight, $font-size, $line-height, $color: null) { font-weight: $font-weight; font-size: $font-size; line-height: $line-height; color: $color; }
Interesante la aplicación de los mixins, se me ocurrió que también podemos usarlo para los width y height y los padding-margin:
@mixin dimension($width, $height){ width: $width; height: $height; } @mixin marginPadding($margin, $padding){ margin: $margin; padding: $padding; }
¿Alguien sabe qué extensión ayuda en el autocompletado cuando usamos @mixin? Mi vsc no me brinda opciones y tiendo a equivocarme 😥
@mixin flexCenter($direction, $content, $align) { display: flex; flex-direction: $direction; justify-content: $content; align-items: $align; }
Cool, voy a probar.
un caso de usao practico que le veo a los mixins es para crear el diseño responsivo, ya que nos permite reutilizar como mostrar los elementos en pantalla.
aca codigo de ejemplo, podriamos crear un archivo aparte con el nombre responsive.scss y crear los mixins:
@mixin sm { @media (max-width: 738px) { @content; } } @mixin md { @media (max-width: 1024px) { @content; } } @mixin lg { @media (max-width: 1366px) { @content; } } ```@mixin sm { @media (max-width: 738px) { @content; }} @mixin md { @media (max-width: 1024px) { @content; }} @mixin lg { @media (max-width: 1366px) { @content; }}
un caso de usao practico que le veo a los mixins es para crear el diseño responsivo, ya que nos permite reutilizar como mostrar los elementos en pantalla.
aca codigo de ejemplo, podriamos crear un archivo aparte con el nombre responsive.scss y crear los mixins:
un caso de usao practico que le veo a los mixins es para crear el diseño responsivo, ya que nos permite reutilizar como mostrar los elementos en pantalla.
aca codigo de ejemplo, podriamos crear un archivo aparte con el nombre responsive.scss y crear los mixins:
````scss
@mixin sm { @media (max-width: 738px) { @content; }} @mixin md { @media (max-width: 1024px) { @content; }} @mixin lg { @media (max-width: 1366px) { @content; }}
```
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
