scss help I need help understanding something with functions
I have 4 files. all partials and I do this in my
how do you make everything thing work for the button
// _mixins.scss
@mixin button-style($style) {
background-color: map-get($style, background);
color: map-get($style, color);
padding: map-get($style, padding, 1rem); // Default padding if not defined
width: map-get($style, width, auto); // Default width if not defined
height: map-get($style, height, auto); // Default height if not defined
border: map-get($style, border, none); // Ensure no border is applied if not defined
cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}
// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
$button-styles: (
nav-button: (
background: c.$primary-color,
color: c.$secondary-color,
width: 100%,
height: 100%,
),
);
.nav-button {
@include m.button-style(map-get($button-styles, nav-button));
}
// _breakpoints.scss
$breakpoints: (
'xs': 0,
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px
);
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
@use './abstracts/index' as *;
@use './components/index' as *;
@use './layout/index' as *;
@use './base/index' as *;// _mixins.scss
@mixin button-style($style) {
background-color: map-get($style, background);
color: map-get($style, color);
padding: map-get($style, padding, 1rem); // Default padding if not defined
width: map-get($style, width, auto); // Default width if not defined
height: map-get($style, height, auto); // Default height if not defined
border: map-get($style, border, none); // Ensure no border is applied if not defined
cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}
// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
$button-styles: (
nav-button: (
background: c.$primary-color,
color: c.$secondary-color,
width: 100%,
height: 100%,
),
);
.nav-button {
@include m.button-style(map-get($button-styles, nav-button));
}
// _breakpoints.scss
$breakpoints: (
'xs': 0,
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px
);
@mixin respond-to($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}
@use './abstracts/index' as *;
@use './components/index' as *;
@use './layout/index' as *;
@use './base/index' as *;how do you make everything thing work for the button
